从零开始搭建vite4.0-vue3.0项目

chengbo_eva

已于 2023-09-07 12:53:17 修改

阅读量1.5k

点赞数 2

分类专栏：前端文章标签：前端 vite vue3.0

于 2023-09-07 12:53:13 首次发布

本文链接：https://blog.youkuaiyun.com/lambert00001/article/details/132733864

版权

前言

pnpm和npm的命令行完全一样，如果不想用pnpm的同学可以直接用npm，点击这里看看npm和pnpm有什么区别。

项目地址

如果在安装过程中遇到了什么问题，可以直接到克隆下我的项目去排查原因，欢迎star。

项目初始化

pnpm create vite

然后按照提示操作即可！

cd my-project
pnpm install
pnpm run dev

此时项目已经运行成功了。

git初始化

git init
git add .

# .gitignore文件添加node_modules/ 
node_modules/

git初始化是为了提高项目容错率，以免我们删除错文件的时候可以直接撤回。.gitignore已经内置在项目，不需要再添加。接下来每当我们进行一步操作，都可以进行一次记录，这里就不重复演示了。

别名配置

// vite.config.ts 
import { resolve } from 'path' 
resolve: { 
    alias: { 
        '@': resolve(__dirname, 'src') 
    } 
}

解决vscode报错

1. vite.config.ts

pnpm install --save-dev @types/node

报错原因：typescript 无法识别 node 内置模块类型，所以安装一个node的类型

2. main.ts文件中

在src文件夹下新建一个文件shims-vue.d.ts。

// shims-vue.d.ts 
declare module '*.vue' { 
    import { ComponentOptions } from 'vue' 
    const componentOptions: ComponentOptions 
    export default componentOptions 
}

报错原因：typescript 只能理解 .ts 文件，无法理解 .vue 文件，所以必须得给vue文件声明类型模块。

vue-router安装

pnpm install vue-router@4

src下新建router/index.ts用于配置路由，新建views/home/index.vue文件和views/my/index.vue文件用于路由区分。

import { Router, createRouter, createWebHistory } from 'vue-router' 
const router: Router = createRouter({ 
    history: createWebHistory(), 
    routes: [ 
        { 
            path: '/', 
            redirect: '/home' 
        }, 
        { 
            name: 'Home', 
            path: '/home', 
            component: () => import('@/views/home/index.vue') 
        }, 
        { 
            name: 'My', 
            path: '/my', 
            component: () => import('@/views/my/index.vue') 
        } 
    ] 
}) 
router.beforeEach((to, from, next) => { 
    /* 路由守卫逻辑 */ 
    next() 
}) 
export default router

// main.ts 
import Router from './router/index.ts' 
createApp(App).use(Router).mount('#app')

pinia安装

pnpm i pinia

在src文件夹下新建store/index.ts，store/count.ts。

// main.ts 
import { createPinia } from "pinia"
createApp(App).use(router).use(createPinia()).mount('#app')

到这里，pinia已经引入成功了。下面是测试代码，看pinia是否可以正常运行。

最低0.47元/天解锁文章