如何搭建vue脚手架
项目创建#
使用 create-vue 脚手架创建项目
create-vue参考地址：GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project
步骤：
- 执行创建命令
pnpm create vue
# or
npm init vue@latest
# or
yarn create vue
2.选择项目依赖类容
✔ Project name: … patients-h5-100
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...Done. Now run:cd patient-h5-100pnpm installpnpm lintpnpm dev如果是Vue3项目，注意vscode插件安装
安装：项目开发需要的一些插件
必装：
Vue Language Features (Volar)vue3语法支持TypeScript Vue Plugin (Volar)vue3中更好的ts提示Eslint代码风格校验
注意
- vscode 安装了
Prettier插件的可以先禁用，或者关闭保存自动格式化功能，避免和项目的Eslint风格冲突。
可选：
gitLens代码git提交记录提示json2tsjson自动转ts类型Error Lens行内错误提示
提示：
- 大中型项目建议开启 TS托管模式 , 更好更快的类型提示。
vue3对应的eslint 预制配置
使用：eslint的预制配置，且了解配置作用
rules: {'prettier/prettier': ['warn',{singleQuote: true,semi: false,printWidth: 80,trailingComma: 'none',endOfLine: 'auto'}],'vue/multi-word-component-names': ['warn',{ignores: ['index']}],'vue/no-setup-props-destructure': ['off']}
- 格式：单引号，没有分号，行宽度100字符，没有对象数组最后一个逗号，换行字符串自动（系统不一样换行符号不一样）
- vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的
- 允许对 props 进行解构，我们会开启解构保持响应式的语法糖
执行：
# 修复格式
pnpm lint
vscode 开启 eslint 自动修复
json
"editor.codeActionsOnSave": {"source.fixAll": true,},项目结构调整#
了解：每一个目录结构的作用
./src
├── assets `静态资源，图片...`
├── components `通用组件`
├── composable `组合功能通用函数`
├── icons `svg图标`
├── router `路由`
│ └── index.ts
├── services `接口服务API`
├── stores `状态仓库`
├── styles `样式`
│ └── main.scss
├── types `TS类型`
├── utils `工具函数`
├── views `页面`
├── main.ts `入口文件`
└──App.vue `根组件`
项目使用sass预处理器，安装sass，即可支持scss语法：
pnpm add sass -D
路由代码解析
知道：默认生成的路由代码的含义
import { createRouter, createWebHistory } from 'vue-router'// createRouter 创建路由实例，===> new VueRouter()
// history 是路由模式，hash模式，history模式
// createWebHistory() 是开启history模块 http://xxx/user
// createWebHashHistory() 是开启hash模式 http://xxx/#/user// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path
// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts 添加配置 base: my-path，路由这就会加上 my-path 前缀了const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default router
小结：
-
如何创建实例的方式？
createRouter()
-
如何设置路由模式？
createWebHistory()或者createWebHashHistory()
-
import.meta.env.BASE_URL值来自哪里？vite.config.ts的base属性的值
-
base作用是什么?- 项目的基础路径前缀，默认是
/
- 项目的基础路径前缀，默认是
如果是进行移动端开发就需要用到vant组件库
实现：完整使用vant组件库
安装：
# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant
样式：main.ts
ts
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
import router from './router'
// 样式全局使用
import 'vant/lib/index.css'
import './styles/main.scss'const app = createApp(App)app.use(pinia)
app.use(router)
app.mount('#app')
组件按需使用：App.vue
vue
<script setup lang="ts">
import { Button as VanButton } from 'vant'
</script><template><van-button>按钮</van-button>
</template><style scoped></style>
提问：为什么不全局使用？(具体可根据项目需求)
- 全局使用是全量加载，是项目体积变大，加载慢
