使用vue-cli初始化Vue项目

步骤一:安装node.js

查看node.js是否安装成功:

node -v
查看node.js版本
步骤二:安装cnpm

由于npm是国外的,使用起来比较慢,这里安装cnpm淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org
安装cnpm
步骤三:安装全局vue-cli脚手架

使用cnpm进行安装vue-cli

cnpm install --global vue-cli
使用cnpm安装vue-cli

查看vue-cli是否安装成功:


查看vue-cli是否安装成功
步骤四:使用vue-cli初始化项目

切换到目标路径后:

vue init  webpack projectName
使用vue-cli初始化项目
步骤五:安装依赖

进入项目目录,安装相关依赖

npm install

实在安装慢不得已可以使用cnpm install,但是cnpm有可能发生未知的错误,尽量使用npm install


安装依赖

项目结构说明,可参考下图:


项目结构说明
步骤六:运行项目
npm run dev
运行项目

访问http://localhost:8080/,结果如图:

访问结果

可以使用vscode进行vue项目的开发,也可以使用IDEA配合插件来进行vue的开发,如图:


IDEA中需要安装的vue插件

使用IDEA+插件运行vue项目效果如下:


使用IDEA+插件运行vue项目

使用npm install xxx时如果报错:

request to https://registry.cnpmjs.org/vue failed, reason: Hostname/IP does not match

可以使用以下命令关闭npm的https(取消npm的https认证)

npm config set strict-ssl false