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 相关文章推荐
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
node.js入门学习之url模块
Feb 25 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
React+Antd+Redux实现待办事件的方法
Mar 14 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python匿名函数用法实例分析
2019/08/03 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
践行三严三实心得体会
2014/10/13 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
六年级情感作文之500字
2019/10/23 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers
mysql查看表结构的三种方法总结
2022/07/07 MySQL