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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
UI Events 用户界面事件
Jun 27 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 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
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
详解Vue SPA项目优化小记
2018/07/03 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
python中from module import * 的一个坑
2014/07/20 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python 美化输出信息的实例
2018/10/15 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
这段代码难道不该打印出56吗
2013/02/27 面试题
C#笔试题集合
2013/06/21 面试题
班长岗位职责
2013/11/10 职场文书
司机岗位职责
2013/11/15 职场文书
给同学的道歉信
2014/01/16 职场文书
介绍长城的导游词
2015/01/30 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书