目录

一 单文件组件二 组成部分三 安装四 基础4.1 快速原型设计4.1.1 vue serve4.1.2 vue build 4.2 创建项目 五 插件六 CLI Service七 HTML和静态资源八 css8.1 Vue Loader8.2 Scoped css 九 vue配置9.1 pages9.2 devServer9.3 eslint 十 其他10.1 Vue Devtools10.2 Hot Reload10.3 入口 十一 bug

一 单文件组件

全局组件的缺点：

全局定义造成名字污染

模板字符串没有语法高亮

没有css支持，即css不能与组件放在一块

没有构建工具，只能是有HTML和ES5，且浏览器支持可能不够好。

vue提供Vue CLI3工具，其实就是已配置好的webpack。解决了上述问题，能够将组件写到单个文件中、且支持预处理器（即可使用高级语法、TypeScript、Scss等等）、支持热加载（也启动了HMR？）和预编译。

如果webpack玩的六，可使用vue-loader自行搭配webpack，否则老老实实的使用vue-cli

vue-cli的配置通常符合我们的需求，但也提供配置入口，让我们微调，参考：Configuration Reference

给我感觉，就像spring boot似的，以预配置好了，我们可直接专注于开发。

二 组成部分

CLI：全局安装，提供vue命令。

用于快速创建vue项目（vue create）；甚至直接执行组件进行快速原型设计（vue serve）；也提供图形界面管理项目（vue ui）

CLI Service：当创建项目时，局部安装到项目的开发依赖。构建于webpack和webpack-dev-server之上，含：

加载其他CLI插件的核心服务针对于大多数应用优化的内部webpack配置。含有命令serve,build和inspect。使用vue-cli-service运行，如npx vue-cli-service serve，但vue项目为你配置了默认的脚本，可使用npm运行，如npm serve。

CLI Plugins：vue项目可选的插件，用于提供更强大的功能。

三 安装

#安装vue cli sudo npm install -g @vue/cli

四 基础

4.1 快速原型设计

# 为了支持快速原型设计 sudo npm install -g @vue/cli-service-global

4.1.1 vue serve

只需一个.vue或.js文件，vue serve直接运行文件到开发模式下，使用与vue create创建的项目一样的配置。

Usage: serve [options] [entry] serve a .js or .vue file in development mode with zero config Options: -o, --open Open browser -c, --copy Copy local url to clipboard -h, --help output usage information

默认入口为main.js, index.js, App.vue or app.vue，也可自己指定：

vue serve MyComponent.vue

如果需要，还可提供index.html,package.json、安装和使用局部依赖、配合vue配置文件等等。

4.1.2 vue build

Usage: build [options] [entry] build a .js or .vue file in production mode with zero config Options: -t, --target <target> Build target (app | lib | wc | wc-async, default: app) -n, --name <name> name for lib or web-component (default: entry filename) -d, --dest <dir> output directory (default: dist) -h, --help output usage information

构建目标文件，生产可用于生产的打包文件，也可构建成library或组件。

4.2 创建项目

运行命令：

vue create hello-world

然后选择默认设置或手动设置。在创建项目的过程中，你的一些设置会被保存在~/.vuerc中。

使用GUI创建项目：vue ui；老版本vue创建项目的版本：vue init webpack my-project

五 插件

vue cli使用基于插件的架构，依赖大多被组织成@vue/cli-plugin-的形式。创建能够修改内部webpack的配置，与注入命令到vue-cli-service中。创建项目时，被列出的很多功能，都是被默认插件体用的。

添加新插件时，使用vue add。插件其实就是node的package，为啥不用npm install呢？因为使用vue add时会通在vue项目中配置该插件。

六 CLI Service

vue cli项目中，会同时安装可执行文件vue-cli-service，它是用来运行、构建vue项目的。

vue-cli-service serve：开启一个dev server（基于wepack-dev-server），并开HMR功能（热模块替换）。vue-cli-service build：产生一个生产级的bundle

等等

七 HTML和静态资源

public/index.html作为html-webpack-plugin使用的模板

html-webpack-plugin主要用于为你的bundle创建一个简单的html文件来运行bundle（即自动注入你bundle）。

模板中可插入一些占位符，略。

多页面app：需在vue.config.js配置pages选项。它能够有效的共享通用chunks

public目录：该目录下的文件会被简单的拷贝到dist中（index.html除外，它被注入了bundle），需要使用绝对路径来访问。发布时需要考虑路径问题，因此所需资源因放在src下

静态资源：打包时对JavaScript、css、.vue文件中指向资源的url的处理：

/：绝对路径，如/image/foo.png，不做处理。

.：相对路径，会被解析成模块请求，最终转化为根绝对路径

@：指向<projectRoot>/src，会被解析成模块请求，最终转化为根绝对路径。

~：指向<projectRoot>/node_modules，如~some-npm-package/foo.png，会被解析成模块请求，最终转化为根绝对路径。

经测试，暂时这个没屁用

对资源文件的模块请求转化为根绝对路径时，添加前publicPath，默认/，可根据项目修改，或者设置为''或./，即转化为相对路径。

八 css

8.1 Vue Loader

Vue Loader用于加载.vue文件。

<template>中的URL会被转化为webpack模块请求。使用规则与第七章一致，因此dog.png文件的URL为./dog.png

如果使用css预处理器，先安装依赖：

npm install -D sass-loader node-sass

然后在style元素的lang属性上指定语言，如：

<style lang="scss"> /* write SCSS here */ </style>

8.2 Scoped css

当style元素加上scoped属性时，组件的css只会作用到该组件的单个实例上。它是通过后css处理器实现的。

css处理前：

<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>

处理后：

<style> .example[data-v-f3f3eg9] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template>

可以看出，它改动了两点：

html元素上添加了一个该组件实例唯一标识的属性data-v-f3f3eg9css选择器上添加了属性选择器，让css选择唯唯一时，还加重了它的重要性

因此父组件想影响有scoped的子组件的样式时，需要设法加重选择器的重要性，比如!important

注意：

组件的不同的实例的css样式都不重复，会导致解析速度下降。对于动态生产的组件不会起作用，因为scoped是在打包时作用的。编写容器组件（包括含<slot>的组件）时，容器组件的根class不要与子组件的根class同名，因为子组件的根class仍会拥有容器组件的唯一标识属性，导致子组件样式被覆盖。因此，最好容器组件的class唯一或选择器唯一。

参考：Scoped CSS

九 vue配置

配置文件vue.config.js参考：Configuration Reference

9.1 pages

构建vue成多页面模式，默认单页面。文档介绍很详细：pages，思路就是指定入口文件和html模板。貌似vue会为你抽离通用chuncks？？被访问过的页面会被缓存起来。

9.2 devServer

配置自带的devServer服务器

port：设置端口号，默认8080

proxy：devServer代理转发请求，主要用于跨域，配置如下：

devServer:{ //devServer监听的端口 port:8000, //配置代理 proxy:{ //拦截的url '/api':{ //转发到目标服务器的url target:"http://localhost:8080/", //是否代理websockets,可选 ws:true, //是否修改Host头部，可选 changeOrgin:true, //修改请求路径 pathRewrite:{'/api':''} } } }

由于是服务器代理请求的，因此没有同源政策的限制。

9.3 eslint

vue.config.js中添加选项lintOnSave: true，可以去掉一些无意义的错误。

参考：@vue/cli-plugin-eslint

十 其他

10.1 Vue Devtools

浏览器插件，可以查看vue组件的属性，仅在开发模式下，该插件才会生效。

10.2 Hot Reload

当你编辑页面时，Hot Reload不是简单的重载页面，而是置换被编辑的组件（无需重载），甚至能保存被置换组件的状态。这样当你更改样式、模板时不必担心组件状态。

未完待续，参考：hot Reload

10.3 入口

貌似默认main.js

十一 bug

使用过程中遇到的莫名其妙的bug：

npm在wsl貌似有权限错误，解决：npm config set unsafe-perm true 核心模块错误（core-js module error）。解决：修改babel.config.js文件，添加选项：presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]