vue3.0|从零搭建vite + vue3.0 + vuex + router + sass/less + naive vue3.0|naive|vue-touter|vuex|前端项目

Vite官网安装vue的介绍 Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
使用 npm：

$ npm init @vitejs/app $ cd $ npm install $ npm run dev

或者 yarn：

$ yarn create @vitejs/app $ cd $ 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");

在组件中使用

> export default { data() { return {} } } >

关于vuex的更多使用，请前往https://blog.csdn.net/glorydx/category_9502077.html
配置全局样式按照行业规范在src文件下创建global.css或者less或者sass样式文件，并在App.vue即最外层的vue组件中引入即可。

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

组件库 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组件，性能不好，官方也不推荐。

> // 只用了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 }; }, }; >

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

> 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, }, }; ="css"> @import url(./global.css);

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文件
【vue3.0|从零搭建vite + vue3.0 + vuex + router + sass/less + naive】