欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

搭建Vue脚手架(vue-cli)并创建一个项目

程序员文章站 2022-04-24 09:44:00
...

1、 安装nodejs环境

官网下载:https://nodejs.org/en/download/ 
一直默认就行,路径可以改变但要记得到

安装完成后cmd,输入

node -v

npm -v

如果能看到node和npm的版本号了,说明已经安装成功 

搭建Vue脚手架(vue-cli)并创建一个项目

2、安装vue-cli

有npm和cnpm两种方式,网上都说cnpm好些,所以我也用的cnpm安装,

首先利用淘宝镜像安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

搭建Vue脚手架(vue-cli)并创建一个项目

安装完成,输入

cnpm -v

搭建Vue脚手架(vue-cli)并创建一个项目

然后全局安装 vue-cli

cnpm install -g vue-cli
  • 搭建Vue脚手架(vue-cli)并创建一个项目

  • 这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。

    查看vue版本号

搭建Vue脚手架(vue-cli)并创建一个项目

如果提示“无法识别 ‘vue’ ” ,有可能是 npm 版本过低,需要手动更新npm的版本号,这也是上面说的为什么要保证npm版本号高的原因,npm的版本可以手动升级更新

npm install -g npm

3、使用vue-cli来创建一个基于 webpack 模板的新项目

创建 
cmd利用cd指令进入到保存项目的文件夹下,然后输入命令

vue init webpack

搭建Vue脚手架(vue-cli)并创建一个项目

搭建Vue脚手架(vue-cli)并创建一个项目

搭建Vue脚手架(vue-cli)并创建一个项目

安装项目所需要的依赖 
进入新建的项目文件夹下,就是上头有一些文件的里面,输入命令

cnpm install

搭建Vue脚手架(vue-cli)并创建一个项目

因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。

运行项目

搭建Vue脚手架(vue-cli)并创建一个项目

出现如图画面,在浏览器中输入网址http://localhost:8080 会出现如下图 

搭建Vue脚手架(vue-cli)并创建一个项目

 

文章参考:https://blog.csdn.net/inthuixiang/article/details/82225407