10分钟上手vue-cli 3.0 入门介绍


Posted in Javascript onApril 04, 2018

环境安装

全新版本的脚手架、逼格非常高、 记住这个名字 @vue/cli ,对就是这个 你npm 或者yarn 安装就行了,先保证全局环境有它。

npm install -g @vue/cli
yarn add global @vue/cli

创建项目

这里对比下以前2.X之前的版本 ,新版本把插件以及模板等 移植到命令行界面了.

旧版 创建命令
2.x vue init
3.x vue create

来一张图把 ,这里已经有几个默认配好的模板了,我们选最后的Manually select features

vue-cli3.0在你创建后会有一个保存当前配置的功能

10分钟上手vue-cli 3.0 入门介绍

配置项目插件和功能

这里就很傻瓜了, 你要集成什么 就选就行了。我这里选个我比较常用的。

  1. TypeScript
  2. PWA
  3. Vue-router
  4. Vuex
  5. CSS预处理
  6. eslint prettier
  7. 自动化测试单元测试 、e2e

10分钟上手vue-cli 3.0 入门介绍

这里我选LESS

10分钟上手vue-cli 3.0 入门介绍

这里我选eslint + prettier

10分钟上手vue-cli 3.0 入门介绍

这里选择语法检查的方式 保存就检查 还是fix和commit时候检查,我就默认选第一个了

10分钟上手vue-cli 3.0 入门介绍

这里单元测试 插件我选jest

10分钟上手vue-cli 3.0 入门介绍

这里是把babel,postcss,eslint这些配置文件放哪

  1. 独立文件放置
  2. package.json

个人喜好 这里我独立放

10分钟上手vue-cli 3.0 入门介绍

最后就是选择 是否记录一下? 下次继续使用这套配置 ,这里咱就不存了 这玩呢存多了 我都不知道怎么删 知道的小哥哥小姐姐麻烦 告诉我下哈。

10分钟上手vue-cli 3.0 入门介绍

ok最后确定后 等待装好吧

10分钟上手vue-cli 3.0 入门介绍

嗖 装好了

10分钟上手vue-cli 3.0 入门介绍

启动项目进入目录,启动项目 这里 vue-cli 3.x 默认会打开浏览器 地址也会打在控制台。

yarn serve 
  // OR
  npm run serve

10分钟上手vue-cli 3.0 入门介绍

启动后的界面就不截图了 ,按步骤正常操作下来应该跟之前版本一样。

项目分析

首先看下整体目录 比 2.x之前 是精简了不少

10分钟上手vue-cli 3.0 入门介绍

去掉了2.x buildconfig等目录 ,大部分配置 都集成到vue.config.js这里了

vue.config.js里
大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等
详细配置可以看官方文档 详细config配置

如何随心所欲

1. 服务器配置修改

这里我先改个端口, 修改vue.config.js 然后重新启动工程 , 可以看到已经改成5999端口了

module.exports = {
 lintOnSave: false,
 devServer: {
  port: 5999
 }
}

2. 常用webpack配置修改

webpack的配置在这个属性里修改configureWebpack  

包括plugins也可以自己扩展 ,本身尤大已经把常用的都封装了 ,不满足可以自行扩展。

这里改个webpack devtool输出方式、默认那个我属实不知道怎么跟踪代码

configureWebpack: config => {
  if (process.env.NODE_ENV === 'development') {
    config.devtool = 'source-map'
    // mutate config for production...
  } 
}

其他配置 就不一一介绍了 具体可以看这里webpack

3. 全局变量的设置

在项目根目录 创建二个文件

.env.development
.env.production

里面配置键值对就行了

但要注意 这里必须以VUE_APP开头

这样我们就可以自定义个全局变量在某个模式下

VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'

比如这样在axios中就可以配置根路径了

const service = axios.create({
  baseURL: process.env.VUE_APP_MOCK_URL
})

总结

本文使用vue-cli3.x 从环境、到创建、到配置、和常用项目技巧进行了简单介绍,希望可以帮助到刚使用的人 。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
vue cli升级webapck4总结
Apr 04 #Javascript
JavaScript实现短暂提示框功能
Apr 04 #Javascript
Vue filter介绍及详细使用
Apr 04 #Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 #Javascript
详解如何用babel转换es6的class语法
Apr 03 #Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 #Javascript
You might like
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php 发送带附件邮件示例
2014/01/23 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
JS 统计时间
2021/03/09 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python中定义结构体的方法
2013/03/04 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
法学专业个人求职信
2013/09/26 职场文书
网络教育毕业生自我鉴定
2013/10/10 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
教学质量评估实施方案
2014/03/17 职场文书
学校课外活动总结
2014/05/08 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
唐山大地震的观后感
2015/06/05 职场文书
Python可视化神器pyecharts绘制水球图
2022/07/07 Python