vue-cli 学习笔记

一 单文件组件

全局组件的缺点：

• 全局定义造成名字污染

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

• 没有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   Build target (app | lib | wc | wc-async, default: app)
  -n, --name       name for lib or web-component (default: entry filename)
  -d, --dest        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，不做处理。

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

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

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

    经测试，暂时这个没屁用

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

八 css

8.1 Vue Loader

• Vue Loader用于加载.vue文件。