vue3 学习笔记01 -- 搭建项目及基础配置

vue3 学习笔记01 – 搭建项目及基础配置

确保你已经安装了Node.js（建议使用最新的LTS版本）

搭建项目

• 初始化项目

如果选择npm创建项目再执行
npm create vite@latest my-vue3-app --template vue-ts

使用yarn，如果电脑没有安装yarn cnpm i yarn -g
 
yarn create vite my-vue3-app --template vue-ts
使用pnpm：如果电脑尚未安装 pnpm cnpm i pnpm -g
 
pnpm create vite my-vue3-app --template vue-ts

• 进入项目文件夹

cd my-vue3-app

• 安装依赖

npm install

• 启动项目

npm run dev

• 项目目录
  

• 访问页面
  

基础配置 – vite.config.ts

• 使用ip访问

export default defineConfig({
  plugins: [vue()],
  server:{
    host: '0.0.0.0' // 允许IP访问
  },
   resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
})

• resolve.alias 别名

  • 安装 @types/node

  npm install --save-dev @types/node
  

  • 在tsconfig.json中配置,确认 TypeScript 配置正确
    

  • vite.config.js中配置

        import { fileURLToPath, URL } from 'node:url'
        export default defineConfig({
        plugins: [vue()],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
               }
            },
        })
    

• 打开src/mian.ts发现在引入 App.vue中画红线，说明项目中没有.vue的声明文件，需要自行补充一下

src/types/env.d.ts
/// <reference types="vite/client" />
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}