介绍

image.png

image.png

建议先学习下Webpack，再学习Vue CLI，https://www.yuque.com/yejielin/mypn47/qh6irh

=====================

安装

1、安装node.js

下载

image.png
推荐下载左边的稳定版本

安装

安装时下一步下一步

验证（查看版本）

cmd，输入node -v，出现版本号说明安装成功
image.png

查看安装路径

cmd，输入where node
image.png

为什么要安装Nodejs？因为要它的包管理工具NPM

2、配置CNPM

由于npm服务器是在国外，因此安装npm里面的模块时，可能会很慢。

这里建议可以配置淘宝的npm镜像，淘宝会实时与npm服务器同步，因此用cnpm安装模块时要快很多。

配置

cmd 打开命令行，输入 npm install -g cnpm —registry=https://registry.npm.taobao.org

3、安装Vue Cli

安装/更新

cmd 打开命令行，输入cnpm install -g @vue/cli

验证（查看版本）

cmd 打开命令行，输入vue —version
image.png

升级

  1. npm update @vue/cli -g

卸载

cmd 打开命令行，输入npm uninstall -g vue-cli

====================

进入Vue Cli（命令行）

1、创建命令

  1. vue create 项目的名称

2、选择配置

image.png
选了typeScripts的，会问你是否用Babel来编译TS（有两种方式编译TS，一种是通过tsc，一种是通过babel，推荐是babel，可以通过polyfills打上补丁，也是官方推荐）
image.png

如果选了ESLint（代码规范检测），会问你用什么规范
image.png
然后问你什么时候进行代码检测，是保存的时候就检测（第一项），还是编译的时候检测（第二项）
image.png

3、安装完成

4、运行项目DevServer本地服务器

image.png
可以在Package.json 里面的脚本scripts看到命令，

  1. npm run serve 
  2. # 相当于
  3. vue-cli-service serve

5、打包编译

image.png

  1. npm run build
  2. # 相当于
  3. vue-cli-service build

====================

进入Vue Cli（图形，新手推荐）

cmd 打开命令行，输入vue ui
会进入一个图形化的网页，如下
image.png

1、创建项目

点击创建，选择路径即可
image.png

image.png
可以选择Vue3，或者手动配置，以下是手动配置

2、手动选择配置

image.png
1、选择Vue版本，下一步可以选择Vue2还是Vue3

2、Babel：代码转换的工具
如ES6+版本转换成ES5。可以查看https://www.yuque.com/yejielin/mypn47/zu6tft

3、TypeScript：JS的超级，主要是在JS的基础上多了很多类型检测，可以查看https://www.yuque.com/yejielin/mypn47/ah7ky5

4、Router：Vue Router，Vue全家桶之一，主要用于页面跳转，页面路由，可以查看https://www.yuque.com/yejielin/mypn47/gefgyt

5、Vuex：Vue全家桶之一，主要用于公共变量，多个页面共享一些变量，可以查看https://www.yuque.com/yejielin/mypn47/gqfk8w

6、CSS Pre-processors：CSS预处理器模块，主要用于处理LESS、SASS等CSS的语言

7、linter：代码校验工具，用于团队中给代码制定规则，大家都要遵守，否则会报错

8、Unit Testing ：单元测试，可以测试JS代码质量

9、E2E Testing：前端端对端测试

10、使用配置文件：意思是问你是否把上面的插件，单独建立他们自己的配置文件，而不是合在一个文件里面。

新手一般开始选1/4/5就可以了，1选Vue3
image.png

3、创建完成

如下：
image.png

4、配置项目

公共路径默认是/，不用动
image.png

5、运行项目DevServe本地服务器

点击任务，点击serve，点启动即可，然后进入http://localhost:8080 ，就会弹出新建项目的默认页面
image.png

image.png

6、打包编译

image.png
编译压缩后，会在项目目录下生成一个dist文件
image.png
文件夹里面有js文件、css文件等，还有index.html文件，全部放到服务器上就可以运行了。

7、安装依赖

这里会显示项目依赖的JS模块，升级、卸载、安装都在这个界面进行，非常人性化。
image.png

=================

项目配置 vue.config.js

Vue脚手架默认是没有配置文件的，内部已经帮我们做好基本的配置，开箱即用。

如果你对现在的配置不满意，可以手动在项目根目录下创建 vue.config.js 文件，在文件里面写配置，到时候会合并到脚手架的配置里面。

vue.config.js有三种配置方式，都可以用，其中一个就可以了

方式一：CLI提供的选项

比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；
比如outputDir：修改输出的文件夹；
这些属性可以看官方文档
官方文档：https://cli.vuejs.org/zh/config/#vue-config-js

方式二：通过configureWebpack属性修改webpack的配置

可以是一个对象，直接会被合并；
可以是一个函数，会接收一个config，可以通过config来修改配置；

方式三：通过chainWebpack修改webpack的配置

是一个函数，会接收一个基于 webpack-chain 的config对象，可以对配置进行修改；

示例

  1. // vue.config.js
  2. const path = require('path') // 这个是nodejs的一个路径模块，这里引入是为了获取项目的绝对路径
  4. //commonjs方式，因为是在nodejs环境下执行
  5. module.exports = {
  6.   // 方式一
  7.   outputDir: './build',
  9.   // 方式二，和下面是一样的
  10.   // configureWebpack: { 
  11.   //   resolve: {
  12.   //     alias: {
  13.   //       views: '@/views'
  14.   //     }
  15.   //   }
  16.   // }
  18.   // 方式二，和上面是一样的
  19.   // configureWebpack: (config) => {
  20.   //   config.resolve.alias = {
  21.   //     '@': path.resolve(__dirname, 'src'),// 固定写法，通过nodejs的path模块获取绝对路径下的src目录，设置为别名@
  22.   //     views: '@/views'
  23.   //   }
  24.   // },
  26.   // 方式三，链式配置
  27.   chainWebpack: (config) => { 
  28.     config.resolve.alias
  29.       .set('@', path.resolve(__dirname, 'src'))
  30.       .set('views', '@/views')
  31.   }
  32. }

historyApiFallback 路由跳转失败后处理

Vue - Vue Cli 脚手架 - 图25
现在前端可以做到前端路由，前端路由的原理是利用改变浏览器现在访问的地址的情况下，不发生跳转，同时还能显示其他界面。可以查看 https://www.yuque.com/yejielin/mypn47/gefgyt。
但是如果用户点击刷新，很可能会直接报404，因为用户当前的路径在后端是没有任何配置的。
比如用户现在访问的是192.168.0.200:8080/，进入了系统的首页，然后用户点击用户管理，路径变为：192.168.0.200:8080/user，由于前端路由，浏览器会显示用户界面。
此时如果用户点击浏览器的刷新，浏览器会按192.168.0.200:8080/user去访问服务器，其实服务器根本就没有192.168.0.200:8080/user这个页面，因此没办法返回任何信息，只能返回错误代码404，找不到任何信息。

Vue - Vue Cli 脚手架 - 图26
Vue - Vue Cli 脚手架 - 图27
Vue - Vue Cli 脚手架 - 图28
设置，但官网不推荐我们设置。我们其实还可以通过Vue Router路由代替这个效果。查看 https://www.yuque.com/yejielin/mypn47/dlefh4#xVRXE
image.png

=================

项目结构

image.png

文件解释

node_modules：一些依赖包，这里出现的一般都有在package.json中配置的

public：存放网页的小图标、主页等，这个文件夹打包时会原封不动放到dist里面，不会命名
|— favicon.ico ：创建时送的小图标，显示的是vue的标志
|— index.html ：网页的主要入口，一般在这里设置放入什么组件

src：源码，我们就在这个文件夹内写代码
|—assets：放置一些图片，如logo等，这里的打包后会自动命名，并且小于一定大小的会直接变成string文件
|—components：放一些公共组件
|—App.vue：页面入口文件，我们也可以直接将组件写这里，而不使用 components 目录
|—main.js：程序入口文件，加载各种公共组件

.browserslistrc：项目打包转换后，想适配的浏览器
image.png>1%市场份额的浏览器，且适配各个浏览器最新的2个版本，且还在维护的浏览器品牌
其他配置可以查看：image.png

.editorconfig：定义代码格式，例如缩紧是用什么（一般是空格space），缩紧多少个，最后一行要不要插入空行等，安装时选择linter才会有

.gitignore：git上传时忽略的一些文件，比如node_modules这个文件夹

babel.config.js：babel解释器的配置文件，注意是将ES6代码转成ES代码，可以查看https://www.yuque.com/yejielin/mypn47/zu6tft
image.png

package.json：项目信息，项目名称，开发的依赖包等，一个JSON文件
|—“script” 简写的命令，以及它具体执行的命令
|—dependencies，生产环境下所依赖的包
|——版本号”^1.0.0”，^表示大于等于1.0.0的最近一个版本，版本不会超过1.0.X
|—devDependencies，开发环境所依赖的包

package-lock.json：安装依赖的实际版本，例如上面说的版本不会超过1.0.X，假如是1.0.9，那么要有个地方告诉项目我实际上用的是1.0.9，对应上面的”^1.0.0”，就是这个文件

readme.md：项目说明

webpack的配置已经被隐藏起来了，放在node_modules\@vue\cli-service 里面

建议目录结构

参考
src
|—assets：放图片img和样式css
|—views：放一些大的页面视图
|—pagename：一些页面和名字
|—childcomponent：这个页面相关的子组件
|—components：放一些公共组件
|—common：放一些其他项目也能用的组件，到时候直接一个文件夹复制过去就能用
|—content：针对本项目的公共组件，放到别的项目无法直接用的
|—router：路由
|—store：vuex
|—network：网络相关
|—common：公共的js文件，如一些常量、工具类、混入等

=================

Vue Cli 运行原理

1、npm run serve

image.png
相当于运行vue-cli-service serve，这个命令哪里找？

会在 项目目录/node_modules/.bin/vue-cli-service 里面找

2、判断Nodejs版本

vue-cli-service 文件一开始会判断Nodejs版本，版本太低会提示并退出

3、引入一个Service的模块

image.png
这里的路径是类似软连接，并不是代码实际执行的地方，如果你去这个文件所在的目录/node_modules/.bin/下找是找不到这个路径的。

实际上文件在 项目目录/node_modules/@vue/cli-service/bin/
image.png
最终执行的是bin/vue-cli-service.js
image.png
里面也是依赖一个service这个类

4、创建Service对象

image.png

5、调用run运行方法

image.png
command 就是我们传过来的命令
image.png

Service类：
image.png
Service类的run方法：
image.png
把serve或build这两个，传到commands对象里面，取出对应的执行函数fn，然后调用这个函数
这个函数要不就是和serve本地服务有关的，要不就是和build打包有关
image.png

commands对象默认是个空对象，这个空对象当然是没有上面fn这个函数，什么时候这个commands被赋值呢？
image.png
当插件加载的时候，给commands被赋值，让它有对应的fn执行函数
image.png

6、加载环境变量

image.png
加载用户的选项

7、插件

遍历插件，拿到插件方法
image.png
插件方法赋值给解决插件的方法，
image.png
会把方法给到commands
image.png

8、调用serve

image.png

image.png