安装

1、安装node

vue 3需要node10以上版本

node官网下载地址以往的版本 | Node.js

2、安装vue/cli

如果已经全局安装过旧版本的vue-cli

npm uninstall vue-cli -g //yarn global remove vue-cli

然后安装

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

为什么要先卸载vue-cli,在安装vue/cli

如果是安装vue3以下版本的脚手架,命令npm install -g vue-cli@版本号
如果是安装3以上版本的脚手架,命令npm install -g @vue/cli@版本号

参考脚手架vue-cli和@vue/cli的搭建及区别

执行vue-v 查看版本

创建项目

1、新建一个文件夹,然后右键选择打开命令行窗口
2、在命令窗口输入指令 vue create 项目名称

选择初始化项目的配置:

第一步:Default是自动安装,在这里我选择最后一个手动安装,按下回车键进行选择

①default(vue3 babel,eslint):默认设置(直接enter)非常适合快速创建一个新vue3项目的原型,没有带任何辅助功能的 npm包

② default(vue2 babel,eslint):默认设置(直接enter)非常适合快速创建一个新vue2项目的原型,没有带任何辅助功能的 npm包

③ Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包

第二步:配置自定义设置

1 Check the features needed for your project: (Press to select,to toggle all, to invert selection)
2 ( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
3 ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
5 ( ) Router // vue-router(vue路由)
6 ( ) Vuex // vuex(vue的状态管理模式)
7 ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
8 ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
9 ( ) Unit Testing // 单元测试(unit tests)
10 ( ) E2E Testing // e2e(end to end) 测试

第三步:选择vue版本,我选择3.x

第四步:Use history mode for router” />

第六步: Where do you prefer placing config for Babel, ESLint, etc.?
Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

第七步:Save this as a preset for future projects?


是否需要保存当前配置,在以后的项目中可快速构建” /> 8 ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)

Pick a linter / formatter config” />

Pick a unit testing solution: (Use arrow keys)

选择unit testing类型

Cypress (Test in Chrome, Firefox, MS Edge, and Electron)

Cypress 支持浏览器:Chrome、Firefox、Electron

Pick browsers to run end-to-end test on (Press to select,to toggle all, to invert selection, and to proceed)

. Save this as a preset for future projects” />

你也可以点击此处下载代码

https://gitee.com/pearwf/vue3-studay