Vue Cli3 创建项目的方法步骤


Posted in Javascript onOctober 15, 2018

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

1. 安装

npm install -g @vue/cli

2. 创建一个项目

vue create iview-admin
# OR
vue ui

Vue Cli3 创建项目的方法步骤

  • default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持。
  • Manually select features 自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript ,就应该选择这一项。

Vue Cli3 创建项目的方法步骤

  1. TypeScript 支持使用 TypeScript 书写源码。
  2. Progressive Web App (PWA) Support PWA 支持。
  3. Router 支持 vue-router 。
  4. Vuex 支持 vuex 。
  5. CSS Pre-processors 支持 CSS 预处理器。
  6. Linter / Formatter 支持代码风格检查和格式化。
  7. Unit Testing 支持单元测试。
  8. E2E Testing 支持 E2E 测试。

Vue Cli3 创建项目的方法步骤

3. 运行项目

$ npm run serve

Vue Cli3 创建项目的方法步骤

4. 在根目录创建 vue.config.js 空文件,配置 文件

module.exports = {
 /** 区分打包环境与开发环境
  * process.env.NODE_ENV==='production' (打包环境)
  * process.env.NODE_ENV==='development' (开发环境)
  * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
  */
 // 基本路径
 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: () => {},
 //如果想要引入babel-polyfill可以这样写
 // configureWebpack: (config) => {
 //  config.entry = ["babel-polyfill", "./src/main.js"]
 // },
 // 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',
  // 自动打开浏览器
  open: true,
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 处理跨域问题
  proxy: {}, // 设置代理
  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'

 ]

}

静态资源路径

相对路径

  • 静态资源路径以 @  开头代表  <projectRoot>/src
  • 静态资源路径以 ~  开头,可以引入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 就项目性能而言已经相当友好了,私有制定性也特别强,各种配置也特别贴心,可以根据项目大小和特性制定私有预设,对前期项目搭建而言效率极大提升了。

具体请查看 Vue Cli 官网

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

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
layui原生表单验证的实例
Sep 09 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
Vue-Router基础学习笔记(小结)
Oct 15 #Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 #Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 #Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 #Javascript
vue+axios+promise实际开发用法详解
Oct 15 #Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 #Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python实现AES加密和解密
2019/03/27 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
法务专员岗位职责
2014/01/02 职场文书
入党思想汇报
2014/01/05 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
早安问候语大全
2015/11/10 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript