使用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 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
JavaScript实现音乐导航效果
Nov 19 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开发中的安全防范知识详解
2013/06/06 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
nodejs基础知识
2017/02/03 NodeJs
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
小学新学期教师寄语
2014/01/18 职场文书
寄语十八大感言
2014/02/07 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
Echarts如何重新渲染实例详解
2022/05/30 Javascript
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers