1. 检查node版本

 $ node -v 
 v20.10.0

2. 脚手架创建vue3项目

2.1 创建项目

 $ npm create vue@latest

按照如下的提示操作，完成后如下：

 Vue.js - The Progressive JavaScript Framework
 
 ? 请输入项目名称： study-vue3
 ? 是否使用 TypeScript 语法？  否
 ? 是否启用 JSX 支持？  否
 ? 是否引入 Vue Router 进行单页面应用开发？  是
 ? 是否引入 Pinia 用于状态管理？  是
 ? 是否引入 Vitest 用于单元测试？  否
 ? 是否要引入一款端到端（End to End）测试工具？ ? 不需要
 ? 是否引入 ESLint 用于代码质量检测？   是
 ? 是否引入 Prettier 用于代码格式化？   是
 ? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)   否
 
 正在初始化项目 /Webstorm/study-vue3...
 
 项目初始化完成，可执行以下命令：
 
   cd study-vue3
   npm install
   npm run format
   npm run dev

由于后面需要用到全局状态存储与单页路由，所以把相关的组件事先安装好。

2.2 安装组件库

 $ npm install

执行上述命令后，在项目根目录下会多出来一个目录 node_modules 使用 WebStore打开。

?建议使用WebStore，可以使用试用版，足够学习本教程了，也可以合用vscode打开项目。

3. 整理项目目录

3.1 清理文件与目录

• 将 index.html中title改成我们自已的项目名称。

 ...
 <title>Mallray-CMS系统</title>
 ...

• 删除main.js中的样式文件引用这一行：

 import './assets/main.css'  

• 将App.vue文件整理为如下内容：

 <template>
   Hello Vue ~
 </template>
 
 <script setup>
 
 </script>
 
 <style scoped>
 
 </style>

• 删除src/assets目录下所有样式文件与图片文件，保持为空。
• 删除src/views目录下所有.vue文件，保持目录为空。
• 删除src/components目录下所有文件与目录，保持目录为空。
• 整理src/router/index.js文件内容如下：

 import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [];
 
 const router = createRouter({
   history: createWebHistory(),
   routes
 })
 
 export default router

3.2 运行项目与效果

 $ npm run dev
 
 ...
 
   ?  Local:   http://localhost:5173/
   ?  Network: use --host to expose
   ?  press h + enter to show help
 

运行命令行 npm run dev后如上述，此时即可在浏览器预览效果。