Vue3+vite+Typesctipt 项目搭建及router,vuex，sacc等配置

Vue3+vite+Typesctipt 项目搭建配置

1. 创建项目

1. 运行命令npm create vite@latest
2. 按照提示输入项目名称
3. 选择框架技术栈（vanillas框架(其实就是原生)、vue、react、等等）
4. 选择vue-ts
   
   接着进入项目文件夹内，运行npm install及npm run dev，你会看到如下页面
   
   恭喜你，安装完成！！！

2.配置vue-router 和 vuex

注意！现在我们的项目只是一个初始的状态，跟vue-cli不同，vite并没有vueRouter和vueX，这需要我们自己配置

1.安装依赖

npm install vue-router@next vuex@next

2.创建目录结构及内容

创建router/index.ts文件
创建store/index.ts文件
创建views文件夹，可添加自己的组件，这里我添加的Home.vue和Admin.vue

router/index.ts文件内容

import { createRouter, createWebHistory } from "vue-router";

const routerHistory = createWebHistory();

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: "/",
      component: () => import("../views/Home.vue"),
    },
    {
      path: "/admin",
      component: () => import("../views/Admin.vue"),
    },
  ],
});
export default router;

store/index.ts文件内容

import { createStore } from "vuex";

const store = createStore({
  state: {
    test: "test1",
  },
  mutations: {},
  actions: {},
  getters: {},
});

export default store;

App.vue文件内容

<template>
    <router-view />
</template>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #42b983;
  overflow: hidden;
}
</style>

main.ts 内配置

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";    
import store from "./store";
createApp(App).use(router).use(store).mount("#app");

最后home.vue内测试使用router和store

<template>
  <div class="home">
    <h1>home</h1>
    <!-- 路由跳转 -->
    <router-link to="/"> HOME</router-link>
    <router-link to="/admin">ADMIN </router-link>
    <!-- store使用 -->
    <h2>{{ $store.state.test }}</h2>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs } from "vue";
export default defineComponent({
  setup() {
    return {};
  },
});
</script>
<style scoped>
</style>

3. 配置vue＇＠＇符号

vite.config.ts文件添加配置

const path = require("path"); //注意这里会提示安装一个node模块
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

运行 npm i --save-dev @types/node 安装node模块就行了

4. 安装使用scss

注意sass 和 sass-loader的版本要对应

1. npm i sass@1.32.7
2. npm i sass-loader@12.0.0
   安装完就可以使用了

<style lang='scss' scoped>
.home {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #cccccccc;
}