03 vue-cli搭建过程（vue通用后台管理）

03 vue-cli搭建过程

vue-cli创建的项目就是一个模块化的工程 

为了加快npm下载速度，我们两种办法，第一种是使用yarn，

npm i -g yarn // 安装yarn

第二种是修改npm下载镜像的地址为淘宝的镜像地址https://registry.npmmirror.com/

npm config get registry                                    // 获取当前镜像地址
npm config set registry https://registry.npmmirror.com/    // 修改镜像地址

检查npm、node、cnpm、yarn版本

npm -v 
node -v
cnpm -v
yarn -v

安装脚手架 

// 用npm安装vue/cli
npm install -g @vue/cli
// 也可以用yarn安装vue/cli
yarn global add @vue/cli

// 检查vue/cli版本，如果是4.0版本则需要重装cli
vue -V

// 如果报错“vue不是内部或外部命令”
将node.js所在目录的vue.cmd文件的所在文件夹路径添加到环境变量的Path里面

// 报错“文件名、目录名或卷标语法不正确。”
将vue.cmd文件内容@"%~dp0\C:\Users\Kewin\AppData\Local\Yarn\Data\global\node_modules\.bin\vue.cmd"   %*
更改为@"C:\Users\Kewin\AppData\Local\Yarn\Data\global\node_modules\.bin\vue.cmd"   %*

使用cli创建项目

// 用“vue create + 项目名称”创建项目，项目名称不可大写
vue create my-app

查看管理文件package.json文件，根据文件进行启动

// 可启动脚本
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

// 用"npm run + 脚本名称"进行启动
npm run serve