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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
vue项目实战总结篇
Feb 11 Javascript
简单的三步vuex入门
May 20 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中current、next与reset函数用法实例
2014/11/17 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
js停止输出代码
2008/07/20 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python字典基本操作实例分析
2015/07/11 Python
Python正则简单实例分析
2017/03/21 Python
python list元素为tuple时的排序方法
2018/04/18 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
送给程序员的20个Java集合面试问题
2014/08/06 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
个人存款证明书
2014/10/18 职场文书
先进单位事迹材料
2014/12/25 职场文书
市场部岗位职责范本
2015/04/15 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python