使用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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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&&mysql)二
2006/10/09 PHP
mysql建立外键
2006/11/25 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python3 操作符重载方法示例
2017/11/23 Python
django初始化数据库的实例
2018/05/27 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python实现微信机器人的方法
2019/09/06 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
单位成立周年感言
2014/01/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
导游词之安徽巢湖
2019/12/26 职场文书