使用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 相关文章推荐
JScript的条件编译
May 29 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
中东人咖啡哲学
2021/03/03 咖啡文化
为查询结果建立向后/向前按钮
2006/10/09 PHP
默默小谈PHP&MYSQL分页原理及实现
2007/01/02 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php动态生成函数示例
2014/03/21 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python入门教程之识别验证码
2017/03/04 Python
python读取文件名称生成list的方法
2018/04/27 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
python中for in的用法详解
2020/04/17 Python
Python定义一个函数的方法
2020/06/15 Python
python 爬虫请求模块requests详解
2020/12/04 Python
介绍一下Mysql的存储引擎
2015/02/12 面试题
工作目标责任书
2014/07/23 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL