创建Vue3项目详细步骤

14,480 阅读2分钟

一、创建vue3项目

1.环境配置:

  • Node版本需8.9以上
node -v  // 查询Node版本

补充:推荐使用nvm进行管理Node版本(同时安装多个Node版本):nvm安装详细步骤

  • vue-cli需3.0以上版本(已安装旧版1.x/2.x的需先卸载)
vue -V  // 查询vue-cli版本 
npm uninstall -g vue-cli  //卸载旧版vue-cli

npm install -g @vue/cli // 安装vue-cli3/cli4版本(本文选此项)
npm install -g vue-cli // 安装vue-cli2版本
  • 其他常用命令:
vue -V  // 查询vue-cli脚手架版本 
npm list vue  // 查询vue版本 
npm -V  // 查询npm版本 
node -v  // 查询node版本
nvm ls  //查询已安装的node版本,需先安装nvm

2.创建项目

vue create vue3-demo // vue-cli3/cli4版本 (本文选此项)
vue init webpack vue2-demo // vue-cli2版本
  • Manually select features 自定义选项:

image.png

  • 选择你需要的配置项,按上下键滚动,空格键选中当前特性,最后按回车确定:

image.png

Babel:转码器,可将ES6代码转为ES5
TypeScript: 支持使用 TypeScriptJavaScript超集)
Progressive Web App (PWA) Support :支持PWA(渐进式Web应用程序) 
Router :支持 vue-router (路由)
Vuex :支持 vuex (状态管理器)
CSS Pre-processors: 支持 CSS 预处理器
Linter / Formatter :支持代码风格检查和格式化
Unit Testing:支持单元测试
E2E Testing: 支持 E2E 测试(end to end)
  • 选择vue版本:

image.png

  • 使用用history模式来创建路由(根据自身需要选择):

image.png

  • 选择CSS预处理器(根据自身需要选择):

image.png

  • 选择ESlint(我选默认):

image.png

  • 什么时候检测(我选保存的时候):

image.png

  • 选择配置文件位置(单独保存在各自的配置文件中or放在package.json中):

image.png

  • 保存本次配置内容:

image.png

3.运行项目(跑它!跑它!)

npm run serve

image.png

二、项目基础配置(多页面)

1.初始的项目结构:

image.png

2.接口配置:

...待更新,今天先写到这里