前言
我司前端技术自从我来了之后就一直定位vue, 项目经历了webpack3.0迁移到webpack4.0 和vue-cli2.0升级到vue-cli3.0，感觉前端技术更新迭代速度之快，顿时头疼啊，最近刚用vue-cli3.0撸完了一个后台管理系统，现在来跟大家聊聊vue-cli3.0
环境安装
以下为mac版本
使用 npm 全局安装 vue-cli ：
sudo npm i -g @vue/cli
复制代码下载完成后 执行
vue -V
复制代码目前版本已经更新到了 3.0.3
vue -h
复制代码查看新版本的帮助信息
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init)
config [options] [value] inspect and modify the config
Run vue <command> --help for detailed usage of given command.
复制代码可以清楚的看到创建项目命令已经由
vue init <project-name>
复制代码变成了
vue create <app-name>
复制代码创建项目
那么接下来我们开始创建项目
vue create my-project
复制代码回车，页面变成了这样
注意：现在已经不是选择模版了，而是presets （预设） 首先是问你是否使用默认的preset还是手动配置功能， 这里我们选最后的Manually select features 手动配置
Vue CLI v3.0.3
? Please pick a preset: (Use arrow keys)
xs-default (vue-router, vuex, less, babel, pwa, eslint)
pro_admin (vue-router, vuex, less, babel, pwa)
pro_admin_pc (vue-router, vuex, less, babel)
default (babel, eslint)
❯ Manually select features
复制代码接下来是一个多选的界面，可以使用 空格键选中或是取消， a键选中所有，i键反选
这里就很傻瓜了， 你要集成什么 就选就行了。我这里选个我比较常用的。
- Babel
- Vue-router
- Vuex
- CSS预处理
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
❯◉ CSS Pre-processors
◯ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
复制代码router是否使用history模式 我这里使用history模式
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
复制代码CSS预处理 这里我选Less
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS
❯ Less
Stylus
复制代码这里是把babel,postcss,eslint这些配置文件放哪
- 独立文件放置
- 放package.json里
个人喜好 这里我独立放
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
复制代码最后就是选择 是否记录一下？ 下次继续使用这套配置 ，这里咱就不存了 这玩呢存多了 我都不知道怎么删 知道的小哥哥小姐姐麻烦留言告诉我下哈。
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
复制代码ok最后回车 等待中...
Vue CLI v3.0.3
✨ Creating project in /Users/lijinpeng/Documents/web/demo/my-project.
? Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
yarn install v1.9.4
info No lockfile found.
[1/4] ? Resolving packages...
[2/4] ? Fetching packages...
[3/4] ? Linking dependencies...
success Saved lockfile.
✨ Done in 70.85s.
? Invoking generators...
? Installing additional dependencies...
yarn install v1.9.4
[1/4] ? Resolving packages...
[2/4] ? Fetching packages...
[3/4] ? Linking dependencies...
[4/4] ? Building fresh packages...
success Saved lockfile.
✨ Done in 10.66s.
⚓ Running completion hooks...
? Generating README.md...
? Successfully created project my-project.
? Get started with the following commands:
$ cd my-project
$ yarn serve
复制代码嗖 装好了
启动项目进入目录,启动项目 这里 vue-cli 3.x 默认会打开浏览器 地址也会打在控制台。
➜ cd my-project
➜ my-project git:(master) yarn serve
yarn run v1.9.4
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 3299ms 18:12:45
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.3.137:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
复制代码项目分析
首先看下整体目录 比 2.x之前 是精简了不少
vue.config.js里
大概包括了配置常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等，详细配置可以看官方文档 详细config配置
module.exports = {
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
baseUrl: '/',
// where to output built files
// 打包后的输出目录
outputDir: 'dist',
// A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
assetsDir: '',
// whether to use eslint-loader for lint on save.
// 保存时是不是用eslint-loader 来lint 代码
lintOnSave: false,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// 使用runtime-only 还是 in-browser compiller
compiler: false,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack 配置~
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader options
// https://vue-loader.vuejs.org/en/options.html
// vue-loader 配置
vueLoader: {},
// generate sourceMap for production build?
// 生产环境的sourceMap 要不要？
productionSourceMap: true,
// CSS related options
css: {
// extract CSS in components into a single CSS file (only in production)
extract: true,
// enable CSS source maps?
sourceMap: false,
// pass custom options to pre-processor loaders. e.g. to pass options to
// sass-loader, use { sass: { ... } }
loaderOptions: {},
// Enable CSS modules for all css / pre-processor files.
// This option does not affect *.vue files.
// 用不用 css Modules 啊？
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
// 使用多线程否？
parallel: require('os').cpus().length > 1,
// split vendors using autoDLLPlugin?
// can also be an explicit Array of dependencies to include in the DLL chunk.
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// 用不用 autoDLLPlugin，厉害了
dll: false,
// options for the PWA plugin.
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
// pwa 相关
pwa: {},
// configure webpack-dev-server behavior
// Webpack dev server
devServer: {
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: 'http://192.168.226.47' // 配置跨域处理,只有一个代理
// proxy: {
// '/api': {
// target: '<url>',
// ws: true,
// changeOrigin: true
// },
// '/foo': {
// target: '<other_url>'
// }
// }, // 配置多个代理
before: app => {}
},
// options for 3rd party plugins
pluginOptions: {
// ...
}
}
复制代码总结
本人也是刚用vue-cli3.0撸完了一个项目感觉整体要比2.x项目构架上简洁合理不少，使用起来也十分应手，整体感觉还是非常不错的。
本文也是使用vue-cli3.0 从环境、到创建、到配置进行了简单介绍，希望可以帮助到刚使用的人 。
2376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
