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 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
了解一点js的Eval函数
Jul 26 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JQuery学习总结【一】
Dec 01 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP中创建并处理图象
2006/10/09 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python 的类、继承和多态详解
2017/07/16 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
python对XML文件的操作实现代码
2020/03/27 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
会计人员岗位职责
2014/03/19 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
500字作文之关于爸爸
2019/11/14 职场文书