vue3-基础-优快云博客

本文链接：https://blog.youkuaiyun.com/wang_peng/article/details/132722853

本文介绍了如何使用Vue项目的基本创建步骤，包括安装依赖(npminstall)，如Pinia状态管理库和Prettier代码格式化工具。还涵盖了常用类库的安装和配置，如pinia-plugin-persistedstate以及prettier配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建项目

1.1 创建

npm install -g pnpm

pngm create vue

或者

npm init vue@latest

npm install

npm run dev

1.2 选择内容

1.3 安装依赖

pnpm install

1.4 运行

pnpm dev

1.5 最后

1.6 配置

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printWidth: 80, //每行宽度至多80字符
        trailingComma: 'none', //不加对象|数组最后逗号
        endOfLine: 'auto' //换行符号不限制
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] //vue组件名称多单词组成
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭 props 结构的校验
    'no-undef': 'error'
  }

2.常用类库

2.1 pinia

1) 地址

https://pinia.vuejs.org/zh/

2) 安装

npm add pinia

2.2 持久persistedstate

1) 地址

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

2) 安装

npm i pinia-plugin-persistedstate

3) 将插件添加到 pinia 实例上

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

2.3 prettierrc

2.4 ChatGPT

1) 三方的

https://github.com/lilittlecat/awesome-free-chatgpt

2) 地址

https://p6.v50.ltd/#/chat/1002
http://chatd.free2gpt.xyz/

2.5 Copilot

3.扩展插件

3.1 ESlint

3.2

4.常见问题

4.1 VUE3 路由配置@找不到文件

npm install --save-dev @types/node

配置后重启

4.2