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 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python 多线程应用介绍
2012/12/19 Python
Python常见数据结构详解
2014/07/24 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
对python中的argv和argc使用详解
2018/12/15 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
低碳生活倡议书
2014/04/14 职场文书
快递员岗位职责
2014/09/12 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
材料采购员岗位职责
2015/04/03 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang