vue-cli搭建项目

Posted 2020-11-06 不落幕

使用vue-cli搭建项目

（1）安装node.js
a.可以到node.js官网上下载版本，直接安装，
b.安装完成后，在window系统下的cmd中输入node -v和npm -v 来查询是否安装成功，以及当前安装的版本号;
或者如果电脑安装了git，右击打开gitbash命令行中输入node -v和npm -v 。

（2）安装vue-cli
a.在命令行中输入：npm install vue-cli -g (-g表示全局安装)；（此安装比较慢，推荐使用cnpm）
b.先安装cnpm：npm install -g cnpm，然后使用cnpm -v 查看是否安装成功。
（如果安装失败，可使用 npm cache clean 清理缓存，然后重新安装）
c.使用cnpm安装vue-cli: cnpm instal vue-cli -g，安装完成后，可以使用vue -version查看当前vue-cli版本,
使用vue list查看其提供的几种模板；

（3）初始化项目，生成项目模板
命令：vue init 模板名 项目名
例如：
a.在命令行中输入： vue init webpack-simple vue-cli-demo
b.进入生成的项目目录vue-cli-demo中：cd vue-cli-demo
c.安装项目的依赖包：cnpm install
d.运行：npm run dev (测试环境下)
e.运行：npm run build (生产环境，项目要上线时，默认情况下，打包生成dist目录，将dist目录放到服务器上)