Vue全掌握——命令行脚手架工具 （vue-cli）

传统搭建的项目存在的问题

1. 兼容性问题
   vue-cli会自动解决浏览器兼容问题 。
2. 使用模块化会导致JS文件增加，从而导致传输文件数增加
   vue-cli将全部JS文件整合，极大减少文件数量。
3. 直接使用原始代码会导致文件体积过大
   vue-cli会自动压缩源文件。
4. 使用第三方库很不方便
   1. 搜索
   2. 下载
   3. 引用js（某些第三方库可能没有ES6 模块化版本）
      vue-cli自动依赖组件，导入第三方库也很方便。
5. vue模板书写在字符串中，没有智能提示，没有代码着色
   vue-cli自动提示。
6. 难以把样式代码集成到vue组件中
   vue-cli构建的项目，组件可以写template、style样式、js代码
   …

---

vue-cli工具能够让我们舒舒服服的写代码，然后通过vue-cli转换后，得到一个最适合运行的代码。

vue-cli是一个脚手架工具，它集成了诸多前端技术：
webpack
babel
eslint
http-proxy-middleware
typescript
css pre-prosessor
css module
…

vue-cli安装

node环境：很多工具的运行环境
npm：包管理器，用于下载各种第三方库

1. 安装node：下载node
   验证node和npm：

node -v
npm -v

配置npm源地址：

npm config set registry http://registry.npm.taobao.org/

查看源地址：

npm config get registry

2. 安装vue-cli：

npm install -g @vue/cli

查看：

vue --version

使用vue命令，可能遇到“vue不是内部或外部的命令”的错误
解决：可能是npm的安装位置自定义的，npm下载的vue.cmd命令文件在npm文件夹下，所以需要vue.cmd的路径添加至PATH环境变量。

vue-cli的使用

在工作空间目录打开shell命令窗口
创建项目：（项目名只能包含英文、数字、-）

vue create 工程名

出现下面选择如何配置项目：（默认的、手动的）

选定/取消选定——按空格键
确定——按回车

选择需要哪些依赖：

选择配置存放文件：


项目创建就完成了！

项目介绍

目录结构：

项目打包：

npm run build

可能出现的问题：

1. 在日志文件，可能出现“error Exit status 3221225477”的错误，这是node版本的问题，需要卸载现有node，安装稳定版本！
2. 打包后。出现404，存在路径错误的情况（打包后，路径由相对的变成非相对的）
   写一个配置文件vue.config.js：
   module.exports = {
   publicPath:’./’,
   configureWebpack:{
   resolve: {
   alias: {
   ‘assets’: ‘@/assets’,
   ‘common’: ‘@/common’,
   ‘components’: ‘@/components’,
   ‘network’: ‘@/network’,
   ‘views’: ‘@/views’,
   ‘plugins’: ‘@/plugins’,
   }
   }
   }
   }

开发项目过程热部署打包：

npm run serve