Vue CLI
Vue CLI
在开发大型单页面应用时，需要考虑项目的组织结构、项目构建、部署、热加载、代码单元测试等多方面与核心业务逻辑无关的事情，对于项目中用到的构建工具、代码检查功能等还需要一遍一遍地重复配置。为此我们选择能够创建脚手架的工具，来帮助搭建一个项目的框架，并进行一些项目所依赖的初始配置。
简介
Vue CLI是一个基于vue.js进行快速开发的完整系统，在vue3发布之前，Vue CLI将包名由原来的vue-cli改成了@vue/cli。
Vue CLI有三个组件。
- CLI(@vue/cli)
全局安装的npm包，提供了终端里的vue命令(如vue create、vue serve、vue ui等)。它提供了通过vue create快速搭建新项目的能力，或者通过vue serve即时原型化新想法的能力。我们还可以通过vue ui使用图形用户界面管理项目。
- CLI服务(@vue/cli-service)
CLI服务是一个开发环境依赖。它是一个npm包，本地安装到@vue/cli创建的每个项目中，CLI服务是构建于webpack和webpack-dev-server之上的，包含：
- 加载其他CLI插件的核心服务；
- 一个为绝大部分应用优化过的内部webpack配置；
- 项目内部的vue-cli-service命令，包含基本的serve、build、inspect命令。
- CLI插件
CLI插件是给Vue项目提供可选功能的npm包(如Babel/TypeScript转译、ESLint集成、单元测试和端到端的测试等)。Vue CLI插件的名字以@vue/cli-plugin-(用于内置插件)或vue-cli-plugin-(用于社区插件)开头。当在项目内部运行vue-cli-service命令时，它会自动解析并加载项目的package.json文件中列出的所有CLI插件。
安装
npm install -g @vue/cli //全局安装
创建项目
创建项目有两种方式：一种是通过vue create<项目名>命令，以命令行方式创建一个项目；另一种是通过vueui命令启动图形界面创建项目。
vue create
选择好项目存放的目录，命令行输入vue create helloworld，创建一个helloworld项目。项目名中不能有大写字母。
输入完会出现preset让你选择，第三个是手动配置项目，选择第二个vue3版本的：
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
根据配置下载完包之后再输入
D:\Vue项目>cd hellozzd
D:\Vue项目\hellozzd>npm run serve
打开chrome浏览器，输入http://localhost:8080/，即可看到脚手架默认页面。
使用图形页面
命令行输入vue ui，会在浏览器打开vue项目的图形界面管理程序。在这个管理程序中可以创建新项目、管理项目、配置插件和项目依赖、对项目进行基础设置以及执行任务。
项目结构
node_modules //项目依赖的模块
public //该目录下的文件不会被webpack编译压缩处理，引用的第三方库的js文件可以放这里
favicon.ico //图标文件
index.html //项目的主页面
src //项目代码的主目录
assets //存放项目的静态资源
logo.png //logo图片
components //编写的组件放在这个目录下
HelloWorld.vue //Vue CLI创建的HelloWorld组件
App.vue //项目的根组件
main.js //程序入口js文件，加载各种公共组件和所需要用到的插件
.browserslistrc //配置项目目标浏览器的范围
.eslintrc.js //ESLint使用的配置文件
.gitignore //配置在git提交项目代码时忽略哪些文件或文件夹
babel.config.js //Babel使用的配置文件
package.json //npm的配置文件，其中设定了脚本和项目依赖的库
package-lock.json //用于锁定项目实际安装的各个npm包的具体来源和版本号
README.md //项目说明文件
下面看几个关键文件的代码。
App.vue：
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这是一个典型的单文件组件，在一个文件中包含了组件代码、模板代码和CSS样式。在这个组件中引入了HelloWorld组件，然后在template元素中使用它，使用export语句将APP组件作为模块的默认值导出。
App组件是项目的主组件，如果保留它就是修改代码中的导入语句，将其替换为导入的组件即可。
main.js是程序入口JavaScript文件，该文件主要用于加载各种公共组件和项目用到的各种插件，并创建vue的根实例：
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount('#app');
在该文件中，使用import语句按需导入createApp，这就是Vue3引入的Tree-shaking支持。不同于在HTML文件中的引用方式，前面是通过script元素引入vue的js文件。后面基于脚手架项目的开发，对模块的引入都会采用这种方式。
接下来使用import语句导入App组件，调用createApp方法创建应用实例，调用mount方法挂载。
index.html：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
编写一个Hello组件
打开刚才创建的脚手架项目，在components目录下新建Hello.vue单文件组件。
<template>
<p>{{message}}</p>
</template>
<script>
export default {
data() {
return {
message:'Hello,Vue.js'
}
}
}
</script>
打开App.vue，将HelloWorld组价替换为Hello组件：
<template>
<Hello />
</template>
<script>
import Hello from '@/components/Hello.vue'
export default {
name: 'App',
components: {
Hello
}
}
</script>
导入语句中的@符号表示src目录，用于简化路径的访问。
在VSCode中选择终端-新终端，输入npm run serve运行项目。地址栏打开http://localhost:8080/。
package.json
这是一个JSON格式的npm配置文件，定义了项目所需要的各种模块，以及项目的配置信息(如名称、版本、许可证等元数据，在项目开发中经常会需要修改该文件的配置内容)。
{
"name": "hellozzd",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
在使用npm安装依赖的模块时，可以根据模块是否需要在生产环境中使用而选择附加-S(即--save，生产环境)或-D(即--save-dev，开发环境)参数。例如，项目中使用了界面UI组件库element-ui，它肯定是在生产环境中用到的，就可以执行下面命令安装。
npm install element-ui -S
安装后会在dependencies中写入依赖项，在项目打包发布时，写入的依赖项会一起打包。
如果某个模块只是在开发环境中使用，则可用-D安装，会将依赖项写入devDependencies，不会一起打包。
在发布代码时，node_module文件夹不会发布，那么下载了别人的代码后可以在项目根路径下执行npm install命令，，该命令会根据package.json文件下载需要的依赖。
