parcel的高效率及零配置，让很多人欣喜若狂，作为脚手架中的王者webpack也不甘落后，4.x中推出了零配置，当然vue-cli也随之跟进。
创建项目
npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project
cli3.0开始支持选项了，我们主要看一下 manually（default包含在manually里）
首先是特性选择
vue-cli3.x.png
然后是每个特性的配置文件存放方式， 为package.json文件
image.png
最后问你 是否 保存为预设选项
image.png
其实 里面 还有别的询问 都是大同小异 问你，在选过你用npm还是yarn安装后就不再问了（之后可以在.vuerc文件内修改，cd～能看到）会直接帮你创建项目
image.png
之后运行npm run serve就好了（也不是以前的 npm run dev了）
然后打印出前台页面地址和后台服务器地址 会自动打开网页
vue-cli.png
配置项目
虽说是0配置，其实是把某些可以统一的配置项帮使用者配置好了。
当然默认配置也是可以更改的。
初始目录
相比2.x的目录清爽了许多，当然对于喜欢自定义的朋友可能有点麻烦。
3.x.png
public相当于原来的static，里面的index.html是项目的入口，src同以前
cli3.0没有build和config了，
想要配置的话，需要在项目根目录下创建vue.config.js文件
关于详细的配置信息，在此放一份 官方说明 供大家参考～
module.exports = {
// 项目部署的基础路径
// 我们默认假设你的应用将会部署在域名的根部，
// 比如 https://www.my-app.com/
// 如果你的应用时部署在一个子路径下，那么你需要在这里
// 指定子路径。比如，如果你的应用部署在
// https://www.foobar.com/my-app/
// 那么将这个值改为 `/my-app/`
baseUrl: '/',
// 将构建好的文件输出到哪里
outputDir: 'dist',
// 是否在保存的时候使用 `eslint-loader` 进行检查。
// 有效的值：`ture` | `false` | `"error"`
// 当设置为 `"error"` 时，检查出的错误会触发编译失败。
lintOnSave: true,
// 使用带有浏览器内编译器的完整构建版本
// 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
compiler: false,
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 选项
// 查阅 https://vue-loader.vuejs.org/zh-cn/options.html
vueLoader: {},
// 是否为生产环境构建生成 source map？
productionSourceMap: true,
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
extract: true,
// 是否开启 CSS source map？
sourceMap: false,
// 为预处理器的 loader 传递自定义选项。比如传递给
// sass-loader 时，使用 `{ sass: { ... } }`。
loaderOptions: {},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// 是否使用 `autoDLLPlugin` 分割供应的包？
// 也可以是一个在 DLL 包中引入的依赖的显性的数组。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式
dll: false,
// PWA 插件的选项。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md
pwa: {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {
// `app` 是一个 express 实例
}
},
// 三方插件的选项
pluginOptions: {
// ...
}
}
配置文件去哪了？
由下图可看出 vue-cli-service 就是配置文件,那么它在哪里呢?
package.png
接着找到vue-cli-service，如下图
image.png
看看
vue-cli-service.js这个文件，发现里面调了一个Service.js
#!/usr/bin/env node
const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node
if (!semver.satisfies(process.version, requiredVersion)) {
error(
`You are using Node ${process.version}, but vue-cli-service ` +
`requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
)
process.exit(1)
}
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
接着，找到Service.js文件，再往下一点 看到了 vue.config.js，这不就是文档说的我们的配置文件吗～
很多代码↑
loadUserOptions (inlineOptions) {
// vue.config.js
let fileConfig, pkgConfig, resolved, resovledFrom
const configPath = (
process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
path.resolve(this.context, 'vue.config.js')
)
if (fs.existsSync(configPath)) {
try {
fileConfig = require(configPath)
if (!fileConfig || typeof fileConfig !== 'object') {
error(
`Error loading ${chalk.bold('vue.config.js')}: should export an object.`
)
fileConfig = null
}
} catch (e) {
error(`Error loading ${chalk.bold('vue.config.js')}:`)
throw e
}
}
很多代码↓
哈哈，终于找到你了！！
学习交流，请加群：654979292
网友评论