目录
一 单文件组件
全局组件的缺点:
-
全局定义造成名字污染
-
模板字符串没有语法高亮
-
没有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
)
- 用于快速创建vue项目(
-
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-f3f3eg9
- css选择器上添加了属性选择器,让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
,可以去掉一些无意义的错误。
十 其他
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" } ] ]