vue基础教学（13）

1. vue-cli起步

1.1 什么是vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

1.2 CLI是什么意思？

• CLI是Command-Line Interface，即命令行界面，也叫脚手架。
• vue cli 是vue.js官方发布的一个vue.js项目的脚手架
• 使用vue-cli可以快速搭建vue开发环境和对应的webpack配置

1.3 vue cli使用

vue cli使用前提node

vue cli依赖nodejs环境，vue cli就是使用了webpack的模板。

安装vue脚手架，现在脚手架版本是vue cli3

npm install -g @vue/cli

如果使用yarn

yarn global add @vue/cli

安装完成后使用命令查看版本是否正确：

vue --version

1. 以管理员使用cmd
2. 清空npm-cache缓存

npm clean cache -force

1.在根目录新建一个文件夹16-vue-cli，cd到此目录，新建一个vue-cli2的工程。

cd 16-vue-cli
//全局安装桥接工具
npm install -g @vue/cli-init
//新建一个vue-cli2项目
vue init webpack 01-vuecli2test

2.创建工程选项含义

• project name：项目名字（默认）
• project description：项目描述
• author：作者（会默认拉去git的配置）
• vue build：vue构建时候使用的模式
  • runtime+compiler：大多数人使用的，可以编译template模板
  • runtime-only：比compiler模式要少6kb，并且效率更高，直接使用render函数
• install vue-router：是否安装vue路由
• user eslint to lint your code：是否使用ES规范
• set up unit tests：是否使用unit测试
• setup e2e tests with nightwatch：是否使用end 2 end，点到点自动化测试
• Should we run npm install for you after the project has been created? (recommended)：使用npm还是yarn管理工具

等待创建工程成功。

注意：如果创建工程时候选择了使用ESLint规范，又不想使用了，需要在config文件夹下的

index.js文件中找到useEslint，并改成false。

 2. vue-cli2的目录结构

• webpack.base.conf.js（公共配置）
• webpack.dev.conf.js（开发环境）
• webpack.prod.conf.js（生产环境）
• 我们使用的脚本命令配置在package.json中。

打包构建：

npm run build

如果搭建了本地服务器webpack-dev-server，本地开发环境：

npm run dev

1. 检查dist文件夹是否已经存在，存在先删除
2. 如果没有err，就使用webpack的配置打包dist文件夹

在生产环境，即使用build打包时候，使用的是webpack.prod.conf.js配置文件。