vue-cli3.0 特性解读


Posted in Javascript onApril 22, 2018

最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁。以下总结下应用过程中的一些经验。

新建项目

# 安装
npm install -g @vue/cli
# 新建项目
vue create my-project
# 项目启动
npm run serve
# 打包
npm run build

打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。

功能配置

功能选择

vue-cli3.0 特性解读

3.0 版本包括默认预设配置 和 用户自定义配置,在用户自定义配置之后,会询问是否保存当前的配置功能为将来的项目配置的预设值,这样下次可直接使用不需要再次配置。

自定义功能配置包括以下功能:

  1. TypeScript
  2. Progressive Web App (PWA) Support
  3. Router
  4. Vuex
  5. CSS Pre-processors
  6. Linter / Formatter
  7. Unit Testing
  8. E2E Testing

可以根据项目大小和功能体验配置不同的功能,空格键 选中/反选,按a键 全选/全不选,按i键反选已选择项, 上下键 上下移动选择。

功能细节配置

vue-cli3.0 特性解读

在选择功能后,会询问更细节的配置,

TypeScript:

  1. 是否使用class风格的组件语法:Use class-style component syntax?
  2. 是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?

CSS Pre-processors:

  1. 选择CSS 预处理类型:Pick a CSS pre-processor

Linter / Formatter

  1. 选择Linter / Formatter规范类型:Pick a linter / formatter config
  2. 选择lint方式,保存时检查/提交时检查:Pick additional lint features

Testing

  1. 选择Unit测试方式
  2. 选择E2E测试方式

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

vue.config.js 自定义配置

vue.config.js完整默认配置

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: () => {},
 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: {},
  // 启用 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: {
  // ...
 }
}

设置代理

# string
module.exports = {
 devServer: {
  proxy: '<url>'
 }
}

# Object
module.exports = {
 devServer: {
  proxy: {
   '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
   },
   '/foo': {
    target: '<other_url>'
   }
  }
 }
}

启用dll

启用dll后,我们的动态库文件每次打包生成的vendor的[chunkhash]值就会一样,其值可以是 true/false,也可以制定特定的代码库。

module.exports = {
 dll: true
}

module.exports = {
 dll: [
  'dep-a',
  'dep-b/some/nested/file.js'
 ]
}

静态资源路径

相对路径

  1. 静态资源路径以 @  开头代表  <projectRoot>/src
  2. 静态资源路径以 ~  开头,可以引入node modules内的资源

public文件夹里的静态资源引用

# 在 public/index.html中引用静态资源
 <%= webpackConfig.output.publicPath %>
 <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow" >

 # vue templates中,需要在data中定义baseUrl
 <template>
  <img :src="`${baseUrl}my-image.png`">
 </template>
 <script>
  data () {
   return {
    baseUrl: process.env.BASE_URL
   }
  }
 </script>

webpack配置修改

用 webpack-chain 修改webpack相关配置,强烈建议先熟悉webpack-chain和vue-cli 源码,以便更好地理解这个选项的配置项。

对模块处理配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('js')
    .include
     .add(/some-module-to-transpile/) // 要处理的模块
 }
}

修改webpack Loader配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('scss')
   .use('sass-loader')
   .tap(options =>
    merge(options, {
     includePaths: [path.resolve(__dirname, 'node_modules')],
    })
   )
 }
}

修改webpack Plugin配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config
   .plugin('html')
   .tap(args => {
    return [/* new args to pass to html-webpack-plugin's constructor */]
   })
 }
}

eg: 在本次项目较小,只对uglifyjs进行了少量的修改,后期如果还有配置上优化会继续添加。

chainWebpack: config => {
  if (process.env.NODE_ENV === 'production') { 
    config
      .plugin('uglify')
      .tap(([options]) =>{
        // 去除 console.log
        return [Object.assign(options, {
          uglifyOptions: { compress: {
            drop_console : true,
            pure_funcs: ['console.log']
          }}
        })]
      })
  }
}

全局变量的设置

在项目根目录创建以下项目:

.env        # 在所有环节中执行
.env.local     # 在所有环境中执行,git会ignored
.env.[mode]     # 只在特定环境执行( [mode] 可以是 "development", "production" or "test" )
.env.[mode].local  # 在特定环境执行, git会ignored
.env.development  # 只在生产环境执行
.env.production   # 只在开发环境执行

在文件里配置键值对:

# 键名须以VUE_APP开头
VUE_APP_SECRET=secret

在项目中访问:

console.log(process.env.VUE_APP_SECRET)

这样项目中的 process.env.VUE_APP_SECRET 就会被 secret 所替代。

vue-cli 3 就项目性能而言已经相当友好了,私有制定性也特别强,各种配置也特别贴心,可以根据项目大小和特性制定私有预设,对前期项目搭建而言效率极大提升了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
javascript 函数使用说明
Apr 07 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
Javascript函数式编程语言
Oct 11 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
javascript对象3个属性特征
Nov 17 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 #Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 #Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 #Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
You might like
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
js常用自定义公共函数汇总
2014/01/15 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python 性能优化技巧总结
2016/11/01 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
django 简单实现登录验证给你
2019/11/06 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
单位未婚证明范本
2014/01/18 职场文书
保护动物的标语
2014/06/11 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
社会实践心得体会范文
2016/01/14 职场文书
小学教师教学反思
2016/02/24 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python