vue-cli
vue-cli是vue的脚手架工具，帮我们快速生成了vue的起步项目，内置一些必备的比如打包工具，比如配置文件等等。
地址：https://cli.vuejs.org/zh/
第一步全局安装
npm install -g @vue/cli
如何查看是否安装成功
vue --version
此时代表安装成功
我们使用vue create命令创建自己的项目
vue create my-project
此时会让我们选择版本，默认就行
现在就安装成功了。我们把桌面上的这个my-project文件放到Visual Studio Code中打开（因为我用的就是这个变异软件）
vue-cli的目录结构
接下来我们看一下vue-cli的目录结构
- node_modules项目的依赖中心
- public：静态资源文件夹，和assets不同的是public不会被webpack进行打包，使用路径的时候要使用绝对路径
- src：项目的核心区域，所有的开发文件的核心内容区域，包括组件，静态资源等等
- asstet：静态资源文件夹，和public不同的是assets文件夹会被webpack打包，所以要使用相对路径
- components：Vue功能组件的存放位置，内部存放的是公用的组件
- views：公共文件，主要以各个独立页面为主
- APP.vue：整个vue的根组件，所有的vue组件都是从这个组件中拓展的，App根组件最后通过编译后将内容渲染到.html文件中
- main.js：vue的入口文件，vue文件初始化位置
- .gitignore：GitHub相关配置文件，作用是git再提交代码的时候指定相关忽略格式文件
- babel.config.js：babel的配置文件
- package.json：配置（记录了）项目的相关模块，项目相关配置信息等等
- package-lock.json：作用是记录的当前项目安装的相关依赖版本，并且记住了当前所有依赖的关联关系，如果下次vue进行编译的时候会按照这个文件进行编译
- README.md：文件的作用是项目相关的使用方法，和使用说明
vue-cli文件的编译过程
我们知道vue-cli的起步命令是npm run serve，那么这个命令干了一些什么，为什么可以执行相关的编译程序？
首先我们要知道npm run 执行一个命令或者是一个文件内容
我们看package.json文件中
1 {
2 "name": "my-project",
3 "version": "0.1.0",
4 "private": true,
5 "scripts": {
6 "serve": "vue-cli-service serve",
7 "build": "vue-cli-service build",
8 "lint": "vue-cli-service lint",
9 "test":"echo hello world" //自己加入测试命令
10 },
11 "dependencies": {
12 "core-js": "^3.6.5",
13 "vue": "^2.6.11"
14 },
15 "devDependencies": {
16 "@vue/cli-plugin-babel": "~4.5.0",
17 "@vue/cli-plugin-eslint": "~4.5.0",
18 "@vue/cli-service": "~4.5.0",
19 "babel-eslint": "^10.1.0",
20 "eslint": "^6.7.2",
21 "eslint-plugin-vue": "^6.2.2",
22 "vue-template-compiler": "^2.6.11"
23 },
24 "eslintConfig": {
25 "root": true,
26 "env": {
27 "node": true
28 },
29 "extends": [
30 "plugin:vue/essential",
31 "eslint:recommended"
32 ],
33 "parserOptions": {
34 "parser": "babel-eslint"
35 },
36 "rules": {}
37 },
38 "browserslist": [
39 "> 1%",
40 "last 2 versions",
41 "not dead"
42 ]
43 }我们知道scripts是npm执行目录，也就是在scripts这个对象中的key就是npm run的命令值
vue-cli提供了三个命令
- serve：这个是我们开发使用的命令，执行编译和热更新（ctrl+s的时候浏览器会实时更新）
- build：工作中如果我们本地调试完后需要部署代码前，进行打包的命令
- lint：命令的作用是检验文件代码的合格性（对eslint的校验）
以npm run serve为例
第一步命令会找到node_modules文件夹中.bin文件夹内部的vue-cli-service文件
此时我们根据路径找到了这个执行文件
我们找到这个核心代码
vue-cli的起步文件
1.main.js文件
1 import Vue from 'vue'
2 // 相对路径引入的App.vue文件
3 import App from './App.vue'
4
5 // 这行命令的作用是给生产环境配置的提示消息，如果为true或者默认不配置，会有相关提示语
6 Vue.config.productionTip = false
7
8 new Vue({
9 // 渲染节点
10 render: h => h(App),
11 // 挂载函数，内部#app是vue的根节点，在public文件中的index.html中
12 }).$mount('#app'）
2.public>index.html根文件
1 <!DOCTYPE html>
2 <html lang="">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 <title><%= htmlWebpackPlugin.options.title %></title>
9 </head>
10 <body>
11 <noscript>
12 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 </noscript>
14 <div id="app"></div>
15 <!-- built files will be auto injected -->
16 </body>
17 </html>
noscript标签的作用是当script标签加载不出来或者抛出错误的时候替换内容，目的是在浏览器中提供友好提示
<div id="app"></div>是整个vue项目的根标签，vue需要挂载的标签
3.App.vue文件
App.vue文件是整个项目的根组件，项目中所有的页面切换页面显示都是在这个组件基础上渲染的
我们将整个App.vue文件清空后发现
1 <template>
2 <div id="app">
3
4 </div>
5 </template>
6
7 <script>
8
9 export default {
10 components: {
11
12 }
13 }
14 </script>
15
16 <style>
17 </style>
上面的结构是.vue文件的基础结构
- <template>元素的作用是搭建vue文件的结构
- <script>元素的作用是对当前文件逻辑进行交互
- <style>元素的作用是对当前文件的样式进行修饰
我们之前开发中.js文件只有逻辑，.css文件只有样式，.html文件只有结构，但是.vue的组建就是将视图和逻辑进行了一个整合。
