使用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实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
vue实现整屏滚动切换
Jun 29 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中的观察者模式
2010/03/24 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
javascript的函数
2007/01/31 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
会计师职业生涯规划范文
2014/02/18 职场文书
本科应届生自荐信
2014/06/29 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
开幕式邀请函
2015/01/31 职场文书
总经理年会致辞
2015/07/29 职场文书
学习党章心得体会2016
2016/01/15 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫