vue-cli框架搭建及vue.config.js配置
vue-cli框架搭建
第一步：我们需要在命令行中安装 vue-cli 工具，你可能还需要安装 yarn。
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
第二步：新建一个项目。
$ vue create my-project
-
选择默认配置还是自定义（上下键控制选择哪个，Enter键确定）
若选择默认直接下一步即可。 -
自定义选项（可以根据项目大小和功能体验配置不同的功能，空格键 选中/反选，按a键 全选/全不选，按i键反选已选择项， 上下键 上下移动选择。）
babel：一个javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码
typescript：作用有些类似于babel，拥有类型检查能力和面向对象新特征。
PWA：渐进式WEB应用
Router：路由，设置url，使不同的url显示不同的页面
Vuex：作用类似于全局对象，但是并不完全相同。
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准
Unit Testing：单元测试
E2E Testing：e2e测试
TypeScript
- 是否使用class风格的组件语法：Use class-style component syntax?
- 是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?
CSS Pre-processors：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
SCSS/SASS
LESS
Stylus
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Linter / Formatter
-
选择Linter / Formatter规范类型：Pick a linter / formatter config
-
选择lint方式，保存时检查/提交时检查：Pick additional lint features
? Pick additional lint features: (Pressto select, to toggle all, to invert selection) (*) Lint on save ( ) Lint and fix on commit
Testing
- 选择Unit测试方式
- 选择E2E测试方式
选择将下面的文件保存到哪里
-
独立分放
-
放在package.json
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) In dedicated config files In package.json
vue.config.js 自定义配置（在跟目录新建，vue-cli3全局配置）
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
//引用静态目录
chainWebpack: (config)=>{
config.resolve.extensions
.add('.json')
.add('vue')
.add('.js')
config.resolve.alias
.set('@', resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('layout',resolve('src/layout'))
.set('base',resolve('src/base'))
.set('static',resolve('src/static'))
},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1DA57A', // 全局主色
'link-color': 'red', // 链接色
'border-radius-base': '2px',
'success-color':'#52c41a' // 成功色
},
javascriptEnabled: true
}
},
// 启用 CSS modules for all css / pre-processor files.
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,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
第三步：项目启动
npm run serve
第四步： 打包
npm run build
打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。
摘抄于