Vue3入门

版本

node: 20.11.1
npm: 10.2.4
vue: 3.5.13
vite: 5.4.11

官网地址

https://cn.vuejs.org/

快速开始

1. 脚手架创建项目

npm create vue@latest
pnpm create vue@latest（建议）

选择如下

2. npm太慢
1）使用淘宝镜像

 npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org --global

查看当前配置

npm config list

2. 使用cnpm

npm install -g cnpm

3. 查看使用的vue的版本

npm list vue

‌deduped‌: 重复的

4. 查看使用的vite的版本

npm list vite

5. 开发工具使用vscode
安装插件 Vue

6. 运行和启动

npm install
npm run dev

7. 浏览器插件安装 vue开发工具
   名字：vue.js Devtols
   离线安装，可以去这里下载

极简插件
https://chrome.zzzmh.cn/

8. setup和data函数

1.setup可以与data共存,不建议data和setup同时写
9. setup加载先于data，data可以通过this.xx读取setup创建的数据，但是setup访问不到data定义的数据

10. 插件 vite-plugin-vue-setup-extend
这个插件可以在setup语法糖里面修改插件的名字

1 安装 npm install -D vite-plugin-vue-setup-extend
2 vite.config.ts配置 
  import VueSetupExtend from 'vite-plugin-vue-setup-extend'
   export default defineConfig({
    plugins: [
      .....
      VueSetupExtend()
    ],
  })

12. 插件 unplugin-auto-import
    ts中自动引入类

a) npm i -D unplugin-auto-import
b) 修改 vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    ....
    AutoImport({
      // include: [
      //   /\.vue$/,
      //   /\.vue\?vue/, // .vue
      // ],
      dts: true, 
      imports: [
        'vue',
      ],
      viteOptimizeDeps: true,
    }),
  ],
  ...
})
c) 修改 tsconfig.app.json
增加 "auto-imports.d.ts" 
{
  ....
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
  .....
}

14. eslint
15. prettier
16. stylelint