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 String对象 学习
Jul 19 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
JS数组的赋值介绍
Mar 10 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
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
基于mysql的论坛(6)
2006/10/09 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python列表的增删改查实例代码
2018/01/30 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
网络安全类面试题
2015/08/01 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
绝对经典成功的大学生推荐信
2013/11/08 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
音乐教师求职信范文
2015/03/20 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL