Primary:Vue3{一、入行时2.0cli风靡,历时2年3.0cli开始独领风骚}

卸载、安装

一、使用过2.x的先卸载(底下介绍如何2.x、3.x同时使用)

npm uninstall vue-cli -g
//必须先卸载  要不然3.x命令无法使用,如果没卸载2.x,先下载3.x,之后把2.x卸载掉了还是得重新下载3.x

二、安装3.x(本人习惯npm)

npm install -g @vue/cli
// vue --version     看下版本  一般都是OK的

三、还想使用2.x?

npm install -g @vue/cli-init
// 这是一个桥接工具,安装,初始化一个2.x的版本(与2.x命令一致)!之前2.x的项目也是可以跑起来的
// vue init webpack my-project
// 下载桥接工具之后可以同时运行2.x和3.x;

效果展示

运行图爿与文件夹
运行时,同时运行

3.0创建方式 与初始化

一、创建

    vue create myProject //命令行创建方式
    vue ui //图形界面创建方式

二、初始化

1.【看图一】我们应该选择 Manually select features (手动选择功能)

图1,具体如何设置dev这个请看后面

2.【看图二】

>(*) Babel 
 ( ) TypeScript 
 ( ) Progressive Web App (PWA) Support  //渐进式移动端
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors  //预处理器
 (*) Linter / Formatter  //代码风格、格式校验
 ( ) Unit Testing //单元测试
 ( ) E2E Testing //e2e测试
//一般我们选择带星号的就够用了,按空格选择
图二,选择VUE3.x内置插件

3.【看图三】路由要不用使用history模式

图三

4.【看图四】选择预编译器

图四,出现这个选项是因为你在图二选择了预处理器

5.【看图五】选择代码风格、格式校验

ESLint with error prevention only  仅错误预防
    ESLint + Airbnb config  Airbnb配置
    ESLint + Standard config 标准配置
    ESLint + Prettier
//选择最后一个较美丽的;
图五

6.【看图六】保存时检测还是提交时检测

图六

7.选择 Babel, ESLint, etc等自定义配置的存放位置

In dedicated config files 在专用的配置文件中
In package.json 在package.json

8.保存预设(图一的dev选项就是预设)

 Save this as a preset for future projects? (y/N)
//设置完成后回车开始初始化项目

你可能感兴趣的:(Primary:Vue3{一、入行时2.0cli风靡,历时2年3.0cli开始独领风骚})