如何搭建vue脚手架-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何搭建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-100
  pnpm install
  pnpm lint
  pnpm dev

如果是Vue3项目，注意vscode插件安装

安装：项目开发需要的一些插件

必装：

Vue Language Features (Volar) vue3语法支持
TypeScript Vue Plugin (Volar) vue3中更好的ts提示
Eslint 代码风格校验

注意

vscode 安装了 Prettier 插件的可以先 禁用，或者关闭保存自动格式化功能，避免和项目的 Eslint 风格冲突。

可选：

gitLens 代码git提交记录提示
json2ts json自动转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

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>

提问：为什么不全局使用？(具体可根据项目需求)文章来源地址https://www.toymoban.com/news/detail-412644.html