1. 全局安装 vue-cli
- yarn global add @vue/cli
- // 检查安装是否成功
- vue -V
- // 3.2.2
2. 初始化 vue ui
执行命令
vue ui
2.1
该命令会自动打开你的浏览器, 默认地址为: localhost:8000/project/select, 浏览器展示的页面如下:
切换界面到创建, 点击下面在此创建新项目按钮
输入项目文件夹名称
包管理器, 如果你已经安装了 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 文件中
来源: https://www.cnblogs.com/hezhi/p/10212060.html