vue-cli 学习笔记

本文是Vue CLI3的学习笔记,介绍了其能解决全局组件缺点,将组件写在单文件中。阐述了CLI、CLI Service、CLI Plugins的组成部分,还涵盖安装、快速原型设计、创建项目等基础操作,以及插件、HTML和静态资源、css、vue配置等内容,最后提及使用中遇到的bug及解决办法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一 单文件组件

全局组件的缺点:

  • 全局定义造成名字污染

  • 模板字符串没有语法高亮

  • 没有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,buildinspect。使用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>

可以看出,它改动了两点:

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

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

注意:

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

参考:Scoped CSS

九 vue配置

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:

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值