See You Tomorrow

jiojun的个人小博客

从 0 开始搭建 Vue 基本项目 - 02 使用Vue CLI3 搭建基础项目

1.由于项目文件夹之前已经建好没所以需要返回上级目录,在控制台执行

cd.. 

2.在控制台中运行下面代码创建项目

vue create vue-base-project

2.此时原来如果装过vue CLI 3.0 以前的脚手架 ,会提示

基本项目框架_004

 这时我们需要更新脚手架版本信息,重新安装一次Vue CLI就可以了,这个试讲可能会比较长,需要耐心等待!

3. 重装完成后,我们再次执行vue create vue-base-project  会提示,这里我们选择合并文件夹

基本项目框架_005

4. 之后会弹出如下页面,我们选择第二个,自定义选择

基本项目框架_006

default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持。

Manually select features 自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript ,就应该选择这一项

5. 选择我们所需要的功能,空格选取。回车进入下一步

基本项目框架_007

对于每一项的功能,此处做个简单描述:

  • TypeScript 支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support PWA 支持。
  • Router 支持 vue-router 。
  • Vuex 支持 vuex 。
  • CSS Pre-processors 支持 CSS 预处理器。
  • Linter / Formatter 支持代码风格检查和格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。

6. 选择路由是否启用 history 模式,这里选择Y ,history 模式请 看这里

基本项目框架_010

7. 选择css 预处理语言,这里选择Less, 可根据你自己的需要选择

基本项目框架_011

8. 选择语法监测规则,这里选择 ESLint + Prettier

基本项目框架_012

9. 选择语法监测,这里选择保存就监测

基本项目框架_013

10. 选择babel , eslint 这些配置文件的存放地址

基本项目框架_015

11. 选择是否选择保存相关配置,这里选择Y 方便后面再次创建项目,可选则N,并跳过12步骤

基本项目框架_016

12. 输入配置名称:

基本项目框架_017

13. 等待依赖安装完成

基本项目框架_018

14. 进入项目文件夹,运行项目

基本项目框架_019

15. 在浏览器中输入 http://localhost:8081/  即可查看效果

基本项目框架_020

上一遍:没有了
来都来了,你不打算说点什么吗?
最新留言
暂无留言信息!