1. 全局安装vue-cli

yarn global add @vue/cli
// 检查安装是否成功
vue -V
// 3.2.2

2. 初始化 vue ui

执行命令

vue ui

2.1

该命令会自动打开你的浏览器,默认地址为: localhost:8000/project/select,浏览器展示的页面如下:

切换界面到创建,点击下面在此创建新项目按钮

1. 输入项目文件夹名称
2. 包管理器,如果你已经安装了yarn,vue ui的默认包管理器是yarn

2.2

2.3

上面的两项不用管,是我之前创建过玩的。可能你打开不是这样的,只有默认,手动和远程预设这三项。这里选择手动,下一步。

2.4

接下来,你会被要求配置预装选项,根据你自己项目需求勾选即可。一般来说,Babel,Router,Vuex,Linter这四项是必装的,另外我还勾选了下使用配置文件,可能有的人看不惯项目生成很多的.babelrc 这样单独的配置文件,也可以不勾,这样的话会统一到package.json中去配置

2.5



第一个是问你router的mode要不要设成history模式,一般正式项目都会设成这种模式的

第二个问你选用哪种Eslint风格,从vue-cli@2.x似乎就是standard选的多一些。

第三个是表示当你保存/提交时自动做Lint

接下来会弹窗问你要不要保存为新预设,如果保存的话以后创建项目就可以像2.3中的那种图一样直接选择预设创建项目了

3.与vue-cli@2.x的不同之处

这篇博文感觉都有点写不下去了- -,因为我使用vue ui整个创建项目过程实在过于简单,都是中文版的,直接介绍一下我认为的几个亮点吧。

3.1 关于插件与预设

以前vue-cli@2.x是只提供6种默认模板供大家下载使用,如果想要自己高度自定义,比如你想基于typescritp去做项目,只能去fork官方模板,然后自己修改它,基本上没有生态圈可言。而现在vue-cli@3.x很多特性都是基于插件来灵活扩展的,会有很多大佬去开发各种各样的插件体系,相当于一个插件就可以是一种模板了,比如你在插件面板中可以搜一下elementUI,安装它的话就可以直接帮你生成一套整个基于elementUI的模板了。下载了就能用,基本上零配置。这是因为

  • 每个插件都可以对项目文件操作
  • 每个插件都可以对项目中已有的webpack配置进行操作
  • 每个插件都可以对项目中注入一些script命令,比如serve,build之类的,还可以往一些钩子上注入一些想要执行的事件,比如install之后要做什么
  • 每个插件都可以引入其他插件

以前每次创建一个新项目,都需要自己手动去安装各种依赖什么的,然后又一顿配置改改改。而有了预设之后,下次创建项目的时候都出现在选项列表里,只要勾选了就可以创建一个和之前一样配置和依赖的项目。

(此章节暂时对于我这个战5渣显得太过高深,大家自行去了解更好)

3.2 关于依赖

以前安装插件,需要在vscode编辑器的命令行里执行 yarn add axios 等依赖,

现在可以直接去vue ui 的依赖面板中点右上角的添加依赖,来搜索你想要安装的依赖直接安装。

3.3 关于项目配置

vue-cli@3.x可以让vue ui的界面上直接通过勾选还是不勾选来决定开启还是关闭某些功能(我估计是官方实在是看不惯vue-cli@2.x中一群人瞎改它build目录里的配置然后玩崩了之后去github提各种乱七八糟的issue了,哈哈哈),这种图形化界面的操作方式无疑对我这种战无渣更友好了...再也不用去记一些乱七八糟的命令,百度各种不怎么靠谱的解决方式。

3.4 关于vue ui的任务面板

这个让我感觉特神奇的就是,再也不用在我的编辑器里去执行yarn dev 或者npm run dev了,敲个业务代码还得特意留四分之一的窗口去看它命令行有没有报错...它可以直接在一个网页里跑起来我的项目,还有各种报告生成(虽然我现在很多功能也看不太懂,但是很酷炫有木有)。

同样也可以直接在vue ui界面上去执行run build。查看各种数据,比如打包后的大小等

3.5 关于生成的项目文件夹

.
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── views
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   └── store.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
└── yarn.lock

相比于vue-cli@2.x也简洁了很多,没有build和config目录。

后期遇到坑点应该会记录一下。

番外篇:

另外介绍下mac系统中这种树文件是如何生成的

// 1. 安装brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 2. 利用brew安装tree
brew install tree
// 3. 列出文件树
tree -a -I "node_modules|.git|.vscode" --dirsfirst >a.md
// -a表示列出所有文件,这样可以列出来 .eslintrc.js 这样的以.开头的隐藏文件
// -I "node_modules|.git|.vscode" 这样表示忽略这三个文件夹
// --dirsfirst 表示以文件夹优先排序
// >a.md 表示输出到 a.md文件中

vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验的更多相关文章

  1. Vue ui创建项目

    vue-cli 3.0 版本为我们提供了集 创建.管理.分析 为一体的可视化界面vue UI,一个可视化项目管理器 一.打开终端,安装最新vue-cli npm install -g @vue/cli ...

  2. 初学Vue.js,用 vue ui 创建项目会不会被鄙视

    全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...

  3. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  4. vue技术栈进阶(01.使用vue-cli3创建项目)

    使用vue-cli3创建一个项目 1) 使用Vue UI创建.管理项目 1.安装依赖的脚手架包. 2.命令行中输入vue ui 即可以打开可视化界面 可视化界面: 2)项目结构目录整理 3)基本配置 ...

  5. VUE创建项目

    Vue Cli项目搭建     vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) ...

  6. Vue CLI UI:Vue开发者必不可少的工具

    突然发现一个Vue cli 比较好用的工具,一个可视化图形界面方便你去创建.更新和管理Vue项目.这里分享2个作者写得比较好的文章 https://codeseeding.com/portal.php ...

  7. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  8. [WIP]Vue CLI

    更新: 2019/05/30 文档: https://cli.vuejs.org/zh/  安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础   ...

  9. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

随机推荐

  1. Confluence 6 Microsoft SQL Server 设置准备

    在开始前,请检查: 请查看 Supported Platforms 页面来获得 Confluence 系统支持的 SQL Server 数据库版本.你需要在安装 Confluence 之前升级你的 O ...

  2. NHibernate 如何在并行线程下,使用session

    第一,你要知道,并行线程会有一个蛋疼的地方.他不会每次执行都给你去开一个线程. 我一开始以为每次执行都会去开一个新的线程.... list.AsParallel().ForAll(memberInfo ...

  3. MySQL----数据库练习

    一.多对多的正反向查询 class Class(models.Model): name = models.CharField(max_length=32,verbose_name="班级名& ...

  4. 第八周学习总结-C#、C++

    2018年9月2日 今天是小学期开始第三天,本周前几天看了看C#和C++,用C#窗体做了个计算器,然后还用Scratch做了一个贪吃蛇的脚本. 31号小学期开始,到今天我把A类基本做完了.一开始做通讯 ...

  5. Python变量的作用域

    局部变量 局部变量是指在函数内部定义并使用的变量,他只在函数内部有效.即函数内部的名字只在函数运行时才会创建,在函数运行之前或者运行完毕之后,所有的名字就都不存在了.所以,如果在函数外部使用函数内部定 ...

  6. Java 写一段字符到指定的文本文档中,如果该文本文档不存在,则创建该文本文档

    写一段字符到指定的文本文档中,如果该文本文档不存在,则创建该文本文档 import java.io.File; import java.io.FileNotFoundException; import ...

  7. springcloud Eureka控制台参数说明

    Home进入Eureka控制台首页,首先看HOME页的头部 System Status Environment : 环境,默认为test, 该参数在实际使用过程中,可以不用更改 Data center ...

  8. 调试阶段 获取微信小程序openid

    wx.login({ success: function(res) { //首先获取用户code //res.code wx.request({ url: 'https://api.weixin.qq ...

  9. 51 nod 1181 质数中的质数(质数筛法)

    1181 质数中的质数(质数筛法) 如果一个质数,在质数列表中的编号也是质数,那么就称之为质数中的质数.例如:3 5分别是排第2和第3的质数,所以他们是质数中的质数.现在给出一个数N,求>=N的 ...

  10. jqurey实现点赞特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...