vue-cli 学习笔记

最新推荐文章于 2024-05-03 15:15:02 发布

原创最新推荐文章于 2024-05-03 15:15:02 发布 · 563 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #cli #学习笔记

前端专栏收录该内容

40 篇文章

订阅专栏

本文是Vue CLI3的学习笔记，介绍了其能解决全局组件缺点，将组件写在单文件中。阐述了CLI、CLI Service、CLI Plugins的组成部分，还涵盖安装、快速原型设计、创建项目等基础操作，以及插件、HTML和静态资源、css、vue配置等内容，最后提及使用中遇到的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-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，可以去掉一些无意义的错误。

参考：@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" } ] ]
```