vue-cli3的安装及项目搭建与使用

1. vue-cli 的简单介绍

CLI为命令行工具，Vue-CLI是一个基于nodeJs、用于快速搭建繁杂vue项目的 脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

2. vue-cli的安装与更新

注意：在 win10下安装时，使用管理员身份进行，不然在之后的使用中会有权限限制。

• 完成 安装nodejs ，node中有自带的npm，可以在cmd中直接用npm安装全局的vue-cli：

  C:\Windows\system32> npm install -g @vue/cli-init
  

• 检查当前vue版本号：

  C:\Windows\system32>vue --version
  3.8.2
  

• 也可以使用cnpm安装，这个会速度快些，但需要先装cnpm

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

然后将上面安装过程中的npm换成cnpm就好了

• 更新vue-cli
  cnpm update vue-cli
• 查看vue-cli的版本：使用cnpm view vue-cli，如下：

  C:\Windows\system32>cnpm view vue-cli
  
  vue-cli@2.9.6 | MIT | deps: 20 | versions: 35
  A simple CLI for scaffolding Vue.js projects.
  https://github.com/vuejs/vue-cli#readme
  bin: vue, vue-init, vue-list
  dist
  .tarball: https://registry.npm.taobao.org/vue-cli/download/vue-cli-2.9.6.tgz
  .shasum: afc3cc6ce6de350d89876fee2dc163d0b83e0136
  
  dependencies:
  async: ^2.4.0                     inquirer: ^6.0.0                  rimraf: ^2.5.0
  chalk: ^2.1.0                     metalsmith: ^2.1.0                semver: ^5.1.0
  coffee-script: 1.12.7             minimatch: ^3.0.0                 tildify: ^1.2.0
  commander: ^2.9.0                 multimatch: ^2.1.0                uid: 0.0.2
  consolidate: ^0.14.0              ora: ^1.3.0                       user-home: ^2.0.0
  download-git-repo: ^1.0.1         read-metadata: ^1.0.0             validate-npm-package-name: ^3.0.0
  handlebars: ^4.0.5                request: ^2.67.0
  
  maintainers:
  - rem <0x142857@gmail.com>
  - yyx990803 <yyx990803@gmail.com>
  - zigomir <zigomir@gmail.com>
  
  dist-tags:
  latest: 2.9.6
  
  published 12 months ago by yyx990803 <yyx990803@gmail.com>
  

3. 用vue-cli2.x搭建项目

• 先将路径改为自己的项目文件夹下，运行： vue init webpack my-project11
  其中my-project11为自己建的项目名称，如下所示：
  
  直接按回车键即可
• 基础选项配置
  在下图中你可以对你的项目进行描述，我的描述为：Vue基础
  
  接下来是一些项目构建过程中的配置选项，一般选择no或按回车键即可，当然，若是有你需要的你也可以选yes，其中vue-router你可以在需要的时候再进行安装，ESLint（提供代码检测功能，比较严格，稍微语法不符合它的规范就会报错，可以不选）、unit tests（单元测试）、e2e tests with Nightwatch也是一个测试工具，这里我都没有选择，遇到>的可以通过我们键盘上的上下来进行选择，然后按回车即可

  E:\1-前端\网页\15-vuejs\vue项目>vue init webpack my-project11
  	? Project name my-project11
  	? Project description Vue基础
  	? Author
  	? Vue build standalone
  	? Install vue-router? No
  	? Use ESLint to lint your code? No
  	? Set up unit tests No
  	? Setup e2e tests with Nightwatch? No
  	? Should we run `npm install` for you after the project has been created? (recommended)
  	   `>`Yes, use NPM
  		   Yes, use Yarn
  		   No, I will handle that myself
  

  图片如下，选择使用npm，直接回车
  接下来就是它自动安装项目模块了，需要等待一分钟左右
  
  此时可以看到原本是空的文件夹多了一个my-project11项目文件，如下图中的1；打开该文件夹后，如图中的2所示，里面是一些初始化的项目目录文件夹
  该项目中有很多文件夹，现在简单了解，以后详细补充
  * build 构建了客户端和服务端，可以改变端口号，
  * config 是对应的一些配置
  * src 知识点以后补充
  * static 放的是静态文件
  * index.html 当前入口文件
• 运行项目
  如下图，红色矩形框里是上一步安装项目模块的最后输出，按照蓝色箭头指示的内容，我们先通过cd my-project11到我们项目文件夹下，然后npm run dev，按回车，可开启一个8080的端口
  
  此时可以打开本地服务器实时查看效果（localhost:8080），在浏览器中展示内容，下面看到的就是vue搭建好的一个初始项目
  
• 按Ctrl+C退出监听
  

4. 用vue-cli 3.0搭建项目

有以上基础，相信很快就可以搭建好3.0的项目

• 先将路径改为自己的项目文件夹下，运行： vue create vue3-demo
  其中vue3-demo为自己建的项目名称，如下所示，点击回车：
  

• 接下来也是一些基础选项配置，上图中是问对应你所需要安装的一些东西，第一个选项是默认安装babel和eslint，第二种是可以多个选择的，我这里选择第二种方式，选择要安装的内容，通过键盘的上下箭头控制选项、使用空格来决定要或者不要，若括号内有*表示安装、无*表示不安装
  

  • Babel：javascript转译器。使用原因：javascript不断发展，但浏览器发展速度慢，为能在现有的浏览器上使用js新语法和新数据类型，需要使用一个转译器将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。
  • typescript：微软提供的一种javascript超级，vue3.0版本支持typescript
  • CSS Pre-processors：CSS预处理器，如：Sass（SCSS）、LESS、Stylus等

  下面是我的一些基础设置：
  Save this as a preset for future project?指是否将刚刚自己选择的保存为自己脚手架模板，若Yes则以后可以直接选择自己定义的这个脚手架，并可以给自己定义的脚手架命名，我这里选择no。
  接下来等待一两分钟便安装成功，此时文件夹里多了一个我们新建的项目（1中紫色箭头所示），打开该项目文件夹，里面内容如下图2中所示：
  

• 启动项目

  • 输入cd .\vue3-demo转到项目文件夹下面
  • npm run serve：运行开发环境 或 npm run build：运行生产环境
    运行开发环境如下图所示：
    注意生成两种地址形式，本地地址和网络地址，网络地址可以在手机上查看
    
    打开浏览器，便能看到我们项目的初始化状态：
    
    点击页面上的About，如下所示：
    

• 按Ctrl+C退出监听（和vue cli2.0 一样）
  

5. 用vue-cli 3.0添加插件

在2.0中使用npm install
如：npm install vue-resource --save
npm install vue-router –save
npm install axios

vue-cli 3.0添加插件使用 vue add
如：vue add axios、vue add vuetify，以vue add vuetify为例
先添加插件，再启动项目，如下：

下面便是3.0融合UI库插件 vuetify 后的效果图