使用vue-cli3新建一个项目并写好基本配置(推荐)


Posted in Javascript onApril 24, 2019

1. 使用vue-cli3新建项目: https://cli.vuejs.org/zh/guide/creating-a-project.html

注意,我这里用gitbash不好选择选项,我就用了基本的cmd(系统命令提示符):上下箭头和空格键可控制选项。

详细步骤:

(1)vue create init: 这里我选择了自定义配置

使用vue-cli3新建一个项目并写好基本配置(推荐)

(2)使用上下箭头和空格进行选择,我这里选择了这四个,之所以没用css pre-processors是因为我的项目中要用postcss-cssnext,后面会有详细配置说明

使用vue-cli3新建一个项目并写好基本配置(推荐)

(3)后面的

Use class-style component syntax? 是否使用class风格的组件语法?

Use Babel alongside TypeScript for auto-detected polyfills? 是否使用babel做转义?

Use history mode for router? 是否使用路由的history模式?

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 把babel,postcss,eslint这些配置文件放哪?

Save this as a preset for future projects? (Y/n) 是否记录一下以便下次继续使用这套配置?

使用vue-cli3新建一个项目并写好基本配置(推荐)

使用vue-cli3新建一个项目并写好基本配置(推荐)

2. 改项目端口(个人需求): 在根目录新建vue.config.js(vue-cli3其他配置相关也写在这里)

module.exports = {
 devServer: {
  port: 8100, // 端口号
 }
}

3. 根据环境设置相关变量(比如请求地址、打包输出路径等),并打包不同环境代码

(1)在根目录新建appconf.json,保存不同环境的对应变量配置

{
 "dev": {
 "serverUrl": "http://localhost:57156/"
 },
 "build": {
 "serverUrl": "http://build.com/",
 "outputDir": "../../dist/build",      
 "productId": "111"
 },
 "alpha": {
 "serverUrl": "http://build-test.com/",
 "outputDir": "../../dist/alpha",
 "productId": "222"
 }
}

(2)src下新建common文件夹,下面新建configByEnv.js,根据环境设置对应变量值

var path = require('path')
var appconf = require('../../appconf.json')
var serverurl
var productId = ''
switch (process.env.NODE_ENV) {
 case 'production':
  serverurl = appconf.build.serverUrl
  productId = appconf.build.productId
  break
 case 'development':
  serverurl = appconf.dev.serverUrl
  break
 case 'alpha':
  serverurl = appconf.alpha.serverUrl
  productId = appconf.alpha.productId
  break
}
// 配置 build 文件输出路径, 可以使用绝对路径或相对路径
var outputDir
var reg = /^\.(\.)?\/.*/
if (reg.test(appconf.build.outputDir)) {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = path.resolve(__dirname, appconf.alpha.outputDir) // 相对路径
 else
  outputDir = path.resolve(__dirname, appconf.build.outputDir) // 相对路径
} else {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = appconf.alpha.outputDir
 else
  outputDir = appconf.build.outputDir // 绝对路径
}
var conf = {
 outputDir: outputDir,
 serverUrl: serverurl,
 env: process.env.NODE_ENV,
 productId: productId
}
module.exports = conf

(3) 在需要用以上变量的地方引入即可,如

.js中: var { outputDir } = require('./src/common/configByEnv.js');

.ts中:import {serverUrl} from '@/common/configByEnv.js';

注意:ts这样引入会报错,需要将tsconfig.json中添加  "allowJs": true,

-------- 上面针对某些变量根据不同环境设置了不同值,那么打包时只要更改环境,打包后则会取到不同环境对应的特定值 -----

因为项目中已经有开发环境和打包build环境,我这里只要再加一个打包alpha测试环境:

(1)package.json 中添加

{
 ···
 "scripts": {
 "serve": "vue-cli-service serve",
 "alpha": "vue-cli-service build --mode alpha",
 "build": "vue-cli-service build"
 }
 ···
}

(2)根目录新建.env.alpha,其内容为:

NODE_ENV = 'alpha'

(3)在vue.config.js设置打包输出路径

var { outputDir } = require('./src/common/configByEnv.js');
module.exports = {
 outputDir: outputDir,
 ···
}

4. 在项目中引入并配置postcss-nextcss

1.

// npm install autoprefixer --save-dev 此步不需要了,因为postcss-cssnext自带这个依赖

npm install postcss-cssnext --save-dev

npm install postcss-import --save-dev

npm install postcss-loader --save-dev

2. package.json中如果没有自动生成以下内容,则手动添加以下内容

{
 ··· 
 "postcss": {
 "plugins": {
  "postcss-cssnext": {}
 }
 },
 ··· 
}

5. 引入组件库:我这里用了elementUI,配置步骤:

第一步:进入到项目目录里

npm i element-ui -S

第二步:在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

以上为vue-cli3初始化项目和一些基础配置,可根据个人喜好将ts和css文件与.vue分离。然后,愉快的写代码吧。。

总结

以上所述是小编给大家介绍的使用vue-cli3新建一个项目并写好基本配置 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 #Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 #Javascript
详解Vue源码中一些util函数
Apr 24 #Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 #Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 #Javascript
详解一个小实例理解js原型和继承
Apr 24 #Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
You might like
PHP中鲜为人知的10个函数
2014/02/28 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python argv用法详解
2016/01/08 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python框架django基础指南
2016/09/08 Python
python操作mysql数据库
2017/03/05 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python实现批量修改文件名代码
2017/09/10 Python
python变量的存储原理详解
2019/07/10 Python
详解Python3定时器任务代码
2019/09/23 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python如何更新包
2020/06/11 Python
Python连接Impala实现步骤解析
2020/08/04 Python
PHP如何与mysql建立链接
2013/05/05 面试题
银行会计主管岗位职责
2014/10/01 职场文书
2014年路政工作总结
2014/12/10 职场文书
上班迟到检讨书
2015/05/06 职场文书
车辆管理制度范本
2015/08/05 职场文书
高中军训感想
2015/08/07 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书