Vite vue3 ts 配置 postcss、router、Pinia

目录

VS code需要安装的插件

初始化项目

配置PostCSS

配置vue-router

配置Pinia

使用Pinia

VS code需要安装的插件

Vue Language Features (Volar) - Visual Studio Marketplace

language-postcss - Visual Studio Marketplace

初始化项目

# 创建vue-ts项目
pnpm create vite my-vue-app --template vue-ts
# 进入项目
cd my-vue-app
# 安装依赖
pnpm install

在根目录添加配置文件 .npmrc 

auto-install-peers=true

配置PostCSS

安装依赖

# 安装依赖
pnpm install postcss-load-config -D

创建配置文件 postcss.config.cjs

module.exports = (ctx) => ({})

 当前已经完成postcss的搭建。但是需要满足自己的需求的话，需要配置插件。

安装依赖

pnpm install sugarss postcss-preset-env postcss-import postcss-nested cssnano

module.exports = (ctx) => ({
    parser: ctx.parser ? 'sugarss' : false, // 解析器
    map: ctx.env === 'development' ? ctx.map : false, // map文件
    // 配置插件
    plugins: {
        // 允许你使用未来的CSS特性
        'postcss-preset-env': {
            stage: 2,
            browsers: 'last 2 versions',
        },
        // 允许使用 import
        'postcss-import': {},
        // css 嵌套
        'postcss-nested': {},
        // 一个模块化的 CSS 压缩器
        cssnano: ctx.env === 'production' ? {} : false,
    },
});

配置vue-router

安装vue router依赖

# 安装router依赖

pnpm install vue-router@4

在src文件夹下，创建router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component: () => import('../view/Index.vue'),
    },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default router;

在main.ts中引用

import { createApp } from 'vue';
import './style.css';
// 引用router
import router from './router';
import App from './App.vue';

const app = createApp(App);
// 挂载router
app.use(router);
app.mount('#app');

配置Pinia

安装Pinia依赖

# 安装依赖
pnpm install pinia

配置挂载Pinia

import { createApp } from 'vue';
import './style.css';
import router from './router';
// 引用Pinia
import { createPinia } from 'pinia';
import App from './App.vue';
// 创建Pinia
const pinia = createPinia();

const app = createApp(App);
app.use(router);
// 挂载Pinia
app.use(pinia);
app.mount('#app');

使用Pinia

创建/src/store文件夹，在store文件夹下创建各种store

 创建test.ts

import { defineStore } from 'pinia';

export const useTestStore = defineStore('test', {
    // state属性
    state: () => {
        return {
            name: '张三',
            sex: '男',
        };
    },
    // getters
    getters: {
        getNameData: (state) => {
            return '获取到的名字' + state.name;
        },
    },
    // actions
    actions: {
        saveNameData(name: string) {
            this.name = name;
        },
    },
});

调用示例