新建一个项目,初始化、配置等 步骤

1. 官方标准方式:create-vue(Vue 官方推荐)

-替代旧的 vue-cli
-底层默认用 Vite
-适合:新项目、标准 PC 项目、企业后台、官网
-初始化时可勾选:TS、Vue Router、Pinia、ESLint、Prettier 等
-创建命令:

npm create vue@latest

2. 纯 Vite 方式(更轻、更快)

-直接用 Vite 构建工具创建 Vue 项目
-比 create-vue 更 “裸”,配置更自由
-适合:自己定制工程化、简单 PC 项目
-创建命令:

npm create vite@latest
// 在当前文件夹下直接创建项目,少一层嵌套
npm create vite@latest .

然后选择:Vue → JavaScript / TypeScript

3. 旧时代方式 vue-cli

-基于 webpack,速度慢
-现在新项目基本不用,只维护老项目会见到
-命令:vue create 项目名

4. 企业常用:现成后台管理模板(PC 后台主流),Vue3 + Element Plus,内置:路由、权限、菜单、布局、Pinia、axios等。常见模板:

-vue-pure-admin
-vue-element-plus-admin
-vue-vben-admin

5. 旧时代方式 vue-cli 记录

1. 安装 vue-cli
npm install -g @vue/cli
2. 创建项目
vue create my-project/项目名
3. 选择配置
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Manually select features
4. 选择配置
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
5. 选择 Vue 版本
? Choose a version of Vue.js that you want to start the project with
> 3.x
  2.x
6. 选择路由版本
? Choose a version of Vue Router that you want to start the project with
> 4.x (Vue 3)
  3.x (Vue 2)
7. 选择 Vuex 版本
? Choose a version of Vuex that you want to start the project with
> 4.x (Vue 3)
  3.x (Vue 2)
8. 选择 CSS 预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)
  Less
  Stylus
9. 选择 Lint 工具
? Pick a linter / formatter config:
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
10. 选择 Lint 运行方式
? Pick additional lint features:
 (*) Lint on save
 (Lint and fix files when saving)
 ( ) Lint and fix on commit (Lint and fix files when committing)
11. 选择测试工具
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
  In package.json
12. 选择是否保存配置
? Save this as a preset for future projects?
> Yes
  No
13. 安装依赖
npm install
14. 运行项目
npm run serve