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

环境安装

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

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

创建项目

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

旧版 创建命令
2.x vue init <template-name> <project-name>
3.x vue create <project-name>

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

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

配置项目插件和功能

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

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

这里我选LESS

这里我选eslint + prettier

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

这里单元测试 插件我选jest

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

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

个人喜好 这里我独立放

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

ok最后确定后 等待装好吧

嗖 装好了

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

  yarn serve
  // OR
  npm run serve

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

项目分析

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

去掉了2.x build和config等目录 ,大部分配置 都集成到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 从环境、到创建、到配置、和常用项目技巧进行了简单介绍，希望可以帮助到刚使用的人 。也希望大家多多支持我们。

您可能感兴趣的文章:

  • 浅谈vue-cli 3.0.x 初体验
  • 快速了解vue-cli 3.0 新特性
  • vue-cli3.0 特性解读
赞 (0)

相关推荐

  • 快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能. vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了,但是不可能在本文中列举所有的内容,这篇文章作为一个对比 2.0 升级功能的导读,让你快速了解 3.0 更新的内容. 一.创建项目: 创建项目命令的变化. vue create my-project 3.0 版本包括默认预设配置 和 用户自定义配置. 自定义功能配置包括以下功能: TypeScript P

  • 浅谈vue-cli 3.0.x 初体验

    最近项目正在优化.乘着有时间看了一下 vue-cli3.0.x 使用 .感觉还蛮不错的. 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 "build" 和 "config" ,让人看着就有一些不爽 .由于公司环境比较多,需要测试环境的配置.增加了 ""tt": "node build/tt-build.js"" .到 3.0.x 应该怎么用? 带着这些

  • vue-cli3.0 特性解读

    vue-cli3.0 特性解读

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines)

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • 详解Vue CLI 3.0脚手架如何mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率. 因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cl

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

  • vue cli 3.0 使用全过程解析

    首先在使用 vue create my-project 创建项目的时候要选择使用 css 预处理器. 安装 vue-cli 首先使用 npm 安装 vue-cli v3.0. npm install -g @vue/cli 安装完成后使用 vue -V 查看版本号,如果显示版本号说明安装完成. 创建项目 vue-cli v3.0 创建项目的命令与 2.0 有所不同.3.0 创建项目的命令为: vue create test-project 创建过程中首先选择创建的模式,是采用默认配置,还是自定义

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

    环境安装 全新版本的脚手架.逼格非常高. 记住这个名字 @vue/cli ,对就是这个 你npm 或者yarn 安装就行了,先保证全局环境有它. npm install -g @vue/cli yarn add global @vue/cli 创建项目 这里对比下以前2.X之前的版本 ,新版本把插件以及模板等 移植到命令行界面了. 旧版 创建命令 2.x vue init <template-name> <project-name> 3.x vue create <proje

  • 详解10分钟学会vue滚动行为

    详解10分钟学会vue滚动行为

    滚动行为 什么是路由的滚动行为 当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样 注意: 这个功能只在 HTML5 history 模式下可用.在这个模式下我们需要启动一个服务 我们用scrollBehavior 方法来做路由滚动 scrollBehavior 方法接收 to 和 from 路由对象.第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用 下面我们做一个小案例来了解一下 效果 <

  • Vue.js 十五分钟入门图文教程

    TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0.安装好 vue-cli 之后,使用 vue create 项目名称 来创建项目,vue 脚本手架自动创建以项目名称命名的目录. vue-cli 3 生成的项目结构比较科学,尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来,

  • 十分钟上手正则表达式 下篇

    十分钟上手正则表达式 下篇

    目录 一.正则表达式常用符号 1.1 问号[?] 1.2 加号[+] 1.3 花括号{} 1.4 管道符号[|] 1.5 小括号() 二.正则表达式实战示例 示例1: 示例2: 前面,我们就正则表达式一些常用的基本方法做了详细的介绍,本篇会讲解一些拓展性的知识,主要的就是常见的ERE模式符号以及shell脚本中常见的一些正则表达式例子. 快速学习正则表达式,不用死记硬背,示例让你通透(上篇) 一.正则表达式常用符号 本章示例着重于在gawk程序脚本中的较常见的ERE模式符号. 1.1 问号[?]

  • 十分钟上手正则表达式 上篇

    十分钟上手正则表达式 上篇

    目录 一.正则表达式的定义: 二.正则表达式的类型 三.定义 BRE 模式 3.1 纯文本 3.2 特殊字符 3.3 锚字符 3.3.1 锁定在行首 3.3.2 锁定在行尾 3.3.3 组合锚点 3.4 点号字符 3.5 字符组 3.6 排除型字符组 3.7 区间 3.8 特殊的字符组 3.9 星号[*] 一.正则表达式的定义: 正则表达式是你所定义的 模式模板 ( pattern template ), Linux 工具可以用它来过滤文本. Linux工具(比如sed 编辑器或 gawk 程序

随机推荐