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 相关文章推荐
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
Bootstrap基础学习
Jun 16 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 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
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS求平均值的小例子
2013/11/29 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
python实现决策树分类(2)
2018/08/30 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
应届生骨科医生求职信
2013/10/31 职场文书
党委书记岗位职责
2013/11/24 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
政风行风整改报告
2014/11/06 职场文书
委托书的样本
2015/01/28 职场文书
股权投资协议书
2016/03/23 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL