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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
个人小程序接入支付解决方案
May 23 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
adodb与adodb_lite之比较
2006/12/31 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python fabric实现远程部署
2017/01/05 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
使用python去除图片白色像素的实例
2019/12/12 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
酒店门卫岗位职责
2013/12/29 职场文书
导游个人求职信范文
2014/03/23 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
房屋授权委托书范本
2014/10/07 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
导游词300字
2015/02/13 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL