VUE3.0 一.安装node.js、vue3.0脚手架_vue3对应的nodejs版本

VUE3.0 一.安装node.js、vue3.0脚手架

1.安装nodejs

1. 首先去官网下载nodejs
   
2. 查看npm和node版本，出现版本号即安装成功。

npm -v
# 6.13.4

node -v
# cv10.16.0

1
2
3
4
5
6

2.全局安装vue-cli3.0脚手架

1.全局安装

如果之前安装过 卸载之前的 没有安装过 直接执行下一步

npm uninstall -g vue-cli 
# 卸载之前的 
1
2

npm install -g @vue/cli 
# 或 
yarn global add @vue/cli
1
2
3

2.查看版本/是否安装成功 vue -V

vue -V
1

3.构建vue项目，选择指定文件夹，执行

vue create vue-demo
# vue-demo 项目名称
1
2

? Please pick a preset:这里上下键控制选择默认(default)还是手动(Manually)

• default (babel, eslint) : vue-cli3.0默认使用yarn下载
• Manually select features : 手动

4.选择默认，执行下一步：

将指令切换到 vue-demo文件中 执行yarn serve 项目构建成功

 $ cd vue-demo
 $ yarn serve

1
2
3
4

5.在浏览器打开 http://localhost:8080/ 出现：

6.若第三步选择手动，则出现

• ❯◉ Babel ：将ES6编译成ES5
• ◯ TypeScript： JS超集
• ◯ Progressive Web App (PWA) Support：渐进式WEB应用
• ◯ Router ：VUE路由
• ◯ Vuex ： VUE状态管理（仓库）
• ◯ CSS Pre-processors：css预编译
• ◉ Linter / Formatter：代码检查工具和格式化
• ◯ Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
• ◯ E2E Testing 端对端测试，属于黑盒测试，通过编写实例用例，自动户模拟用户操作

• 选择ESLint的代码规范
• ❯ ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

• 选择如何进行代码检测
• ❯◉ Lint on save ：保存时进行检测
• ◯ Lint and fix on commit：fix和commit时进行检查

• 选择 Babel, ESLint等配置文件存放位置
• ❯ In dedicated config files ：单独保存各自的配置文件中
• In package.json ： 保存在package.json文件中

• 是否保存选择的配置
• 是: 下次构建项目时，可选此配置
• 否： 不保存

选择完成后进入构建画面，与第四步相同