从零搭建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"),}],});exportdefault router;

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

import{ createApp}from"vue";import routerfrom"./router";import Appfrom"./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'exportdefaultcreateStore({
  state:{
    name:'dx'},
  mutations:{},
  actions:{},
  modules:{}})

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

import{ createApp}from"vue";import{ create}from"naive-ui";import routerfrom"./router";import Appfrom"./App.vue";import storefrom"./store";const app=createApp(App);

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

在组件中使用

<template><div>{{$store.state.name}}</div></template><script>exportdefault{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">
	@importurl(./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 routerfrom"./router";import Appfrom"./App.vue";import storefrom"./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";functionmyCount(){let count=ref(0);functionmyAddButton(){
    count.value+=1;}return{ count, myAddButton};}exportdefault{// 对引入的组件进行注册
  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",},},},// ...};exportdefault{data(){return{
      themeOverrides,};},
  components:{"n-config-provider": NConfigProvider,},};</script><style lang="css">
@importurl(./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 vuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultdefineConfig({
  plugins:[vue()],
  css:{// css预处理器
    preprocessorOptions:{
      scss:{// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了// 给导入的路径最后加上 ;
        additionalData:'@import "./src/assets/scss/var.scss";'}}}})

新建一个var.scss文件

在组件中使用scss

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