如何搭建vue脚手架

Posted 2023-04-07 麦兜的明天

项目创建#

使用 create-vue 脚手架创建项目

create-vue参考地址：GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project

步骤：

1. 执行创建命令

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

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>

提问：为什么不全局使用？(具体可根据项目需求)

• 全局使用是全量加载，是项目体积变大，加载慢

使用vue-cli（vue脚手架）快速搭建项目

参考技术A

下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

（1）全局安装 vue-cli ，在命令提示窗口执行：

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：