从零搭建vite + vue3.0 + vuex + router + sass/less + naive

Vite官网安装vue的介绍

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

使用 npm：

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn：

$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

是项目的名称

生成项目的时候 请选择 vue 和 typescript。

这样一个最简单的vue3.0 + ts项目搭建好了。

配置vue-router

安装vue-router依赖

npm i vue-router@4.0.0 -D
或
yarn add vue-router@4.0.0

请带上版本号安装，否则安装的版本可能被不符合接下来的配置要求，官方下载的vue3.0全套中使用的vue-router也是4.0.0版本。（2021-07-08）

在src文件夹中创建router文件夹，并在router文件夹下创建index.ts文件。
在index.ts中创建类似于这样的router并导出

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

const history = createWebHistory();

const router = createRouter({
  history, // 路由模式
  routes: [
    {
      // 页面逻辑
      path: "/",
      name: "Home",
      component: () => import("../pages/Home/Home.vue"),
    },
    {
      path: "/About",
      name: "About",
      component: () => import("../pages/About/About.vue"),
    },
    {
      path: "/Store",
      name: "Store",
      component: () => import("../pages/Store/Store.vue"),
    },
    {
      path: "/Count",
      name: "Count",
      component: () => import("../pages/Count/Count.vue"),
    },
    {
      path: '/TodoList',
      name: 'TodoList',
      component: () => import("../pages/TodoList/TodoList.vue"),
    },
    {
      path: '/RefDom',
      name: 'RefDom',
      component: () => import("../pages/RefDom/RefDom.vue"),
    },
    {
      path: '/ES2016',
      name: 'ES2016',
      component: () => import("../pages/ES2016/ES2016.vue"),
    }
  ],
});

export default router;

并在main.ts 入口文件中引入

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
const app = createApp(App);

app.use(router).mount("#app");

配置vuex

安装vuex依赖

yarn add vuex
或
npm i vuex -D

安装行业规范，在src文件夹下创建store文件夹，并创建index.ts文件
创建store并导出

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: 'dx'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在入口文件main.ts文件中引入并使用

import { createApp } from "vue";
import { create } from "naive-ui";
import router from "./router";
import App from "./App.vue";
import store from "./store";

const app = createApp(App);

app.use(store).use(router).mount("#app");

在组件中使用

<template>
  <div>{{$store.state.name}}</div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style>

</style>

关于vuex的更多使用，请前往https://blog.csdn.net/glorydx/category_9502077.html

配置全局样式

按照行业规范在src文件下创建global.css或者less或者sass样式文件，并在App.vue即最外层的vue组件中引入即可。

<style lang="css">
	@import url(./global.css);
</style>

组件库 naive-ui

naive是vue的作者尤雨溪在微博上亲自推荐的vue3.0组件库。
具体细节请前往 https://blog.csdn.net/glorydx/article/details/118392629?spm=1001.2014.3001.5501

安装

npm i -D naive-ui
或
yarn add naive-ui

在入口文件中引入naive-ui

import { createApp } from "vue";
import { create } from "naive-ui";
import router from "./router";
import App from "./App.vue";
import store from "./store";

const naive = create()

const app = createApp(App);

app.use(store).use(router).use(naive).mount("#app");

在组件中，按需引入组件库，别一下子全部引入整个naive组件，性能不好，官方也不推荐。

<template>
  <div>
    <div>{{ count }}</div>
    <n-button type="info" @click="myAddButton">点击增加</n-button>
  </div>
</template>

<script>
// 只用了nbutton组件
import { NButton } from "naive-ui";
import { ref } from "vue";

function myCount() {
  let count = ref(0);
  function myAddButton() {
    count.value += 1;
  }
  return { count, myAddButton };
}

export default {	
// 对引入的组件进行注册
  components: {
    "n-button": NButton,
  },
  setup() {
    const { count, myAddButton } = myCount();
    return { count, myAddButton };
  },
};
</script>

<style></style>

你可能需要修改部分naive-ui的主题变量，通过naive官方提供的n-config-provider组件设置，各种变量

<script>
import { NConfigProvider } from "naive-ui";
const themeOverrides = {
  common: {
    // primaryColor: "#ff2d52",
  },
  Button: {
    // textColor: "#ff2d52",
  },
  Select: {
    peers: {
      InternalSelection: {
        // textColor: "#FF0000",
      },
    },
  },
  // ...
};
export default {
  data() {
    return {
      themeOverrides,
    };
  },
  components: {
    "n-config-provider": NConfigProvider,
  },
};
</script>
<style lang="css">
@import url(./global.css);
</style>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <router-view />
  </n-config-provider>
</template>

css预处理器（sass或less）

由vite搭建的vue项目默认只支持css，如果想使用less或者sass的话，直接安装less或sass的依赖就好了
使用sass

yarn add sass sass-loader
或
npm i sass sass-loader -D

使用less

yarn add less less-loader -D
或
npm i less less-loader -D

如果想要配置sass的一些默认变量，vite提供了方式，在vite.config.ts中进行如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "./src/assets/scss/var.scss";'
      }
    }
  }
})

新建一个var.scss文件

在组件中使用scss

<template>
  <div class="dx">
    <span>
      123456
    </span>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.dx {
  background: red;
  width: 200px;
  height: 200px;
  
  span {
    color: $default-color;
  }
}
</style>