本文详细介绍了Vue的脚手架工具@vue/cli 3.0的使用，包括如何创建项目、启动和打包应用，以及与VueCLI2的区别。VueCLI3引入了零配置开发、图形化界面和丰富的插件系统，简化了Vue项目的配置流程，旨在提升开发效率。
原文网址：@vue/cli3--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍Vue的脚手架工具@vue/cli的用法。
本文介绍的vue-cli的版本为3.0。
官网
系列文章
- Vue-cli2--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
- @vue/cli3--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
- @vue/cli3--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客
- @vue/cli3--使用命令创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客
- @vue/cli4--使用/教程/实例_IT利刃出鞘的博客-CSDN博客_vuecli4中文文档
- @vue/cli4--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客
- @vue/cli4--使用命令创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客
@vue/cli3介绍
Vue CLI 3.0后的包名称由 vue-cli 改成了 @vue/cli。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供的功能如下：
- 通过 @vue/cli 实现的交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
该系统的组件
Vue CLI 有几个独立的部分——如果你看到了我们的源代码，你会发现这个仓库里同时管理了多个单独发布的包。
#CLI
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。
#CLI 服务
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：
- 加载其它 CLI 插件的核心服务；
- 一个针对绝大部分应用优化过的内部的 webpack 配置；
- 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。
如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。
CLI 服务章节涵盖了它的具体用法。
#CLI 插件
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名，@vue/cli-service 实际上大致等价于 react-scripts，字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。
当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在插件和 preset 章节进行深入讨论。
@vue/cli3和VueCli2的区别
- 命令
- 创建项目
- 3.0：vue create project_name
- 2.0：vue init webpack project_name
- 启动项目
- 3.0：npm run serve
- 2.0：npm run dev
- 创建项目
- 项目配置
- 3.0：设计原则是 “0配置”。
- 移除根目录下的build和config目录。
- 提供vue ui 命令，提供了可视化配置，更加人性化。
- 可在根目录下创建 vue.config.js 文件进行配置。
- 2.0：使用配置文件配置
- 根目录下的build和config目录下的文件进行webpack、多环境和打包等配置。
- 3.0：设计原则是 “0配置”。
- 静态文件的位置
- 3.0：移除 static 文件夹，新增public文件夹，且index.html移动到public中
- 2.0：在static文件夹中
- router路径
- 3.0：有router.js单独文件
- 2.0：在router文件夹下
- webpack版本
- 3.0：基于 webpack 4
- 2.0：基于 webpack 3
命令
安装
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: {
// ...
}
}
扫一扫
1843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
