Vue CLI的安装与使用

老版本非常好的博客（初步了解，不要完全照着做）：https://www.jianshu.com/p/0ae3e3bb3082

各种命令

//安装最新脚手架
npm install -g @vue/cli
//基于官方旧模板，创建2.x版本Vue项目,#project是你的工程名
npm install -g @vue/cli-init
vue init webpack project
//3.0以上版本支持的，图形化创建脚手架
vue ui
//查看Vue版本
vue --version

常用依赖安装

//路由
npm install --save vue-router
//element-ui组件库
npm install --save element-ui
//css转换
npm install --save less
npm install --save less-loader
//网络请求
npm install --save axios
//sass-loader以及node-sass插件
npm install sass-loader -D
npm install node-sass -D

package.json配置

//设置端口号，open为设置启动服务器时自动打开浏览器
    "vue":{
    "devServer":{
      "port": 8081,
      "open": true
    }
  }

vue.config.js配置（Vue3.0版本及以上，得自己创建）

module.exports = {
    devServer:{
      //自动打开浏览器
    open:true,
    port:8080
  }
}

Vue环境的搭建稍显复杂和繁琐，项目的构建也没那么方便。为了解决这个问题，Vue官方提供了Vue CLI。
Vue CLI是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

Vue CLI官方文档：https://cli.vuejs.org/zh/guide/

1.安装

在安装Vue CLI之前，我们需要先下载：
http://nodejs.cn

Linux将压缩包解压，并将安装路径添加到环境变量中。
安装完成后，打开cmd或终端，输入命令node —version或node -v npm -v，出现版本号就代表成功了

接着就可以安装Vue CLI了，在cmd或终端输入如下命令:

npm install -g @vue/cli

然后等待安装结束，输入命令vue —version，出现版本号即代表成功。

修改镜像

注：
1、如果安装的太慢则可以修改源——淘宝镜像

npm config set registry https://registry.npm.taobao.org —global

2、如果安装失败，则可以尝试

npm cache clean —force npm i -g npm

3、找不到vue
如果输入vue命令，出现找不到命令的提示，则通过系统搜索功能搜索“vue”，找到vue命令所在的文件夹：
然后打开命令所在文件夹，将文件夹路径添加到环境变量中

然后打开cmd，就能执行vue命令了。

2.使用

在这里只介绍常用的一些命令，如需要查看更多命令请点击上面的官网链接查看官方文档。
首先是创建项目，通过vue create命令创建:

vue create newProject

除了可以使用命令行管理项目，vue还提供了UI管理界面，通过vue ui可打开UI界面

vue ui

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
在项目默认的package.json中，会看到如下字样:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

通过npm run可以调用这些scripts命令:

npm run serve
npm run build

通过npm run serve可建立Web测试环境，实时查看界面效果。
通过npm run build可生成html文件，用于发布到服务器上。