简介
说明
本文用示例介绍vue的脚手架工具@vue/cli4的用法。
Vue CLI 3.0后的包名称由 vue-cli 改成了 @vue/cli。
官网
@vue/cli4与@vue/cli3的区别
1.目录结构
左侧是@vue/cli3，右侧是@vue/cli4
components：是小组件，可被引用在 components或views 中
views： 是页面级组件，一般 views 组件不被复用；
2.babel.config.js文件
babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset
3.依赖版本
- @vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4
- ass-loader由 v7 的版本升级到了 v8
- ore-js由 v2 的版本升级到了 v3
- ebpack-chain由 v4 的版本升级到了 v6
- ss-loader由 v1 的版本升级到了 v3
- rl-loader由 v1 的版本升级到了 v2
- ile-loader由 v3 的版本升级到了 v4
- opy-webpack-plugin由 v4 的版本升级到了 v5
- erser-webpack-plugin由 v1 的版本升级到了 v2
- @vue/cli-plugin-pwa由 v3 的版本升级到了 v4
- 新增插件 vue add vuex vue add router
- pug-plain已重命名为pug-plain-loader
- 由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json
- 但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }获得更好的一致性
- api.hasPlugin('vue-router')不再受支持，现在 api.hasPlugin('router')
- lintOnSave 选项的默认值（未指定时）从 true 更改为 default
- 废弃vue-cli-service test:e2e
- @vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x
- @vue/cli-plugin-unit-mocha 升级到Mocha 6
- @vue/cli-plugin-unit-jest jest由 v23 升级到v24
- @vue/cli-plugin-typescript 更好的ts(x)支持 ，胜过js(x)
命令
安装
npm install -g @vue/cli
- 一定要在全局模式下安装vue-cli，否则无法使用vue命令
- 上边命令默认安装最新版vue-cli，可自行指定版本：npm install -g @vue/cli@版本号
安装完之后，可以验证是否安装成功：
- vue //会打印Vue-Cli帮助信息
- vue -V //打印Vue-Cli版本
启动/打包
这是个很棒的功能，用于开发一个库、组件，做一些小demo等都是非常适合的！
安装扩展
- npm install -g @vue/cli-service-global
随便找个文件夹建一个.vue文件，然后跑起来
- vue serve App.vue // 启动服务
- 服务启动时生成一个node_modules包，服务支持ES6语法和热更新
- vue build App.vue // 打包出生产环境的包并用来部署
- 打包时会生成一个dist文件夹。(新建一个test.vue文件也只有一个node_modules/dist文件夹)
配置文件
官网
官方文档
简介
可以在项目根目录下新建vue.config.js文件进行配置。
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
如果使用vue ui命令进行图形化配置，最终配置的保存路径为：/node_modules/@vue/cli-service/lib/webpack.config.js
示例配置
module.exports = {
// 基本路径
publicPath: "./",
// 构建时的输出目录
outputDir: "dist",
// 放置静态资源的目录
assetsDir: "static",
// html 的输出路径
indexPath: "index.html",
//文件名哈希
filenameHashing: true,
//用于多页配置，默认是 undefined
pages: {
index: {
// page 的入口文件
entry: 'src/index/main.js',
// 模板文件
template: 'public/index.html',
// 在 dist/index.html 的输出文件
filename: 'index.html',
// 当使用页面 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板文件默认是 `public/subpage.html`
// 如果不存在，就回退到 `public/index.html`。
// 输出文件默认是 `subpage.html`。
subpage: 'src/subpage/main.js'
},
// 是否在保存的时候使用 `eslint-loader` 进行检查。
lintOnSave: true,
// 是否使用带有浏览器内编译器的完整构建版本
runtimeCompiler: false,
// babel-loader 默认会跳过 node_modules 依赖。
transpileDependencies: [ /* string or regex */ ],
// 是否为生产环境构建生成 source map？
productionSourceMap: true,
// 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
crossorigin: "",
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
integrity: false,
// 调整内部的 webpack 配置
configureWebpack: () => {}, //(Object | Function)
chainWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/api': {
target: "http://app.ly.com",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
},
'/foo': {
target: '<other_url>'
}
}, // string | Object
before: app => {}
},
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
extract: true,
// 是否开启 CSS source map？
sourceMap: false,
// 为预处理器的 loader 传递自定义选项。比如传递给
// Css-loader 时，使用 `{ Css: { ... } }`。
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// PWA 插件的选项。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
pwa: {},
// 三方插件的选项
pluginOptions: {
// ...
}
}实例：用命令行创建项目
1. 创建工程
vue create demo_cli4
- demo_cli4是文件夹名字也是项目名，若不存在会自动创建，若存在会安装到那个文件夹中。
- 项目名不允许含有大写字母
- vue-cli2.x需要自己手动创建一个文件夹。
2.选择模板
选择：Manually select features
- 默认配置只有babel和eslint，其他的要自己再配置，所以选手动配置。
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
3.选择组件
默认选项：
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
选这几项即可：
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
( ) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
Linter / Formatter这个，若本处选中了，后边要关闭的话，有两种办法：
- 删除依赖及插件（本方法可运行起来，而且可以消除红色波浪线）
- 删除package.json中的eslint依赖和插件（所有带有eslint字样的项）
- 删除根目录下的.eslintrc.js文件
- 修改配置文件（本方法可运行起来，但无法消除红色波浪线）
- 根目录下新建vue.config.js文件，添加如下内容：
-
module.exports = { lintOnSave: false };
4.vue版本
上边用空格选完之后回车，会到下边界面。本处我选较为成熟的2.x
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x
5.是否使用history模式（若选history：页面路由不使用 #）
- 建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
- 选yes的话需要服务器那边再进行设置。
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
6. 语法检测级别
一般选择：ESLint + Standard config
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only //只检测错误
ESLint + Airbnb config //不严谨的检测
ESLint + Standard config //标准配置：自动纠正、自动格式化
ESLint + Prettier //严格模式：使用Prettier进行风格统一
7.何时进行语法检测
一般选：Lint on save // 保存时检测。
等到commit的时候，问题可能都已经积累很多了
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存时检测
( ) Lint and fix on commit // commit时检测和修复
8.把babel,postcss,eslint等配置文件放到哪里
一般选择：In dedicated config files //独立放置
这样可以让package.json干净些
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
In package.json // 放package.json里
9.是否保存预设值
是否保存以便下次继续使用这套配置
如果选y，则会让你写一个配置的名字：Save preset as: name
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
创建后的结果
实例：图形化界面的使用
简介
功能
可以创建工程、配置已有的工程等。
用一次图形化界面，保证你再也不想用命令行了！
对比命令行的优势
- 使用简单
- 可以退到上一步
配置的保存位置
图形化配置后，会保存到：/node_modules/@vue/cli-service/lib/webpack.config.js
启动图形化界面
命令：vue ui
- 这是个全局的命令，在哪个文件夹都可以运行它
- 界面如下图（重要的项目可以收藏起来(置顶)）
创建项目
点击创建
点击“在此创建新项目”
设置项目名，选择包管理工具等
点击“下一步”
选择预设项
默认配置只有babel和eslint，其他的要自己再配置，所以选“手动”。
选择组件
作用跟上边“创建项目（命令行）”一样，本处不再重复。
本处我的选择为：
点击“下一步”
选择vue版本、是否使用history模式、代码检测
本处我的选择为：
是否保存预设
如果选择是，则后边项目可以直接使用此配置。本处不保存，即：选择“创建项目，不保存预设”。
正在创建项目（最下边会打印目前正在干什么）
创建后的项目结构
跟用命令行创建结果是一样的。
- node_modules：用于存放我们项目的各种依赖；
- public：用于存放静态资源（不会变动的）；
- public/index.html：模板文件，作用是生成项目的入口文件。
- 浏览器访问项目时默认打开的是生成好的 index.html。
- src：是存放各种 .vue 文件的地方。
- src/assets：用于存放着各种静态文件（可能会变动），比如图片。
- src/components：存放公共组件（可复用），比如 header.vue、footer.vue 等。
- src/router/index.js：vue-router 路由文件。
- 需要引入 src/views 文件夹下的 .vue，配置 path、name、component。
- src/store/index.js：是 vuex 的文件，主要用于项目里边的一些状态保存。
- 比如 state、mutations、actions、getters、modules。
- src/views，存放页面组件（不可复用），比如 Login.vue，Home.vue。
- src/App.vue：App.vue 是项目的主组件；
- App.vue：根组件，使用 router-link 引入其他模块，所有页面都在 App.vue 下切换。
- src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。
- .gitignore：配置 git 上传想要忽略的文件格式。
- babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。
- package.json：模块基本信息项目开发所需要的模块，版本，项目名称。
- package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
导入项目
导入项目的文件夹即可，例如：
项目管理
创建完项目会自动进入项目管理界面，或者可以从主页点击项目进入。
仪表盘
插件
依赖
配置
任务
