利用vite做项目从零到1？

最新推荐文章于 2024-05-16 23:40:36 发布

不屈油条

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量61

点赞数

文章标签： vue vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_55451254/article/details/132345360

版权

1、说一下vite

vite是一个前端的构建工具，然后前端的构建工具还有 webpack gulp 等。那么vite的优势是：

极速的服务启动

vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间.

Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理

轻量的快速热重载。Vite 将会使用 esbuild 预构建依赖

vite打包器支持了动态模块热替换（HMR）：允许一个模块 “热替换” 它自己，而不会影响页面其余部分

完全类型化的api --->ts的完美结合
优化的构建

vite.config.ts

主要配置选项：

import {defineConfig} from "vite"

export default defineConfig({

server://关于服务器配置项

plugins:插件

build:构建

preview： 预览选项

})

"build": "vite build --mode production",

打包命令：

npm run build

在打包的时候需要注意在视图使用的图片资源

<img src="../assets/**.png">的这种需要将图片用impot导入进来，import img from "../assets/logo copy.png" 然后再 <img :src="导入的变量">

2、创建vue3项目

npm

npm create vite@latest 
yarn

 yarn create vite

输入项目的名字(作者就用test了)

Project name: » vite-project

按上下选择框架，这就选vue然后回车

√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte

选择ts,

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt

然后控制台出现后面这三条命令，cv就行

Done. Now run:
  cd test
  npm install
  npm run dev

3、安装less/scss
由于是使用vite,vite它提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;

国内一般只使用 less 或 scss,所以我只写这两个安装

安装less依赖

 npm add -D less

安装scss and sass 依赖

npm add -D sass

安装后可以直接使用less了 ,当然，也可以使用scss,一般只下一个就够了,我比较推荐scss
3、自动导入
这个是我非常非常非常推荐的两个插件,不过用过element、naiveui等的人一般也会知道，尤大推荐

本来放到组件库的,但想了下,可能一些新手看不懂,单独拿出来说下,使用之后,不用导入vue中hook reactive ref

npm install -D unplugin-vue-components unplugin-auto-import
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            //安装两行后你会发现在组件中不用再导入ref，reactive等
            imports: ['vue', 'vue-router'],
            //存放的位置
            dts: "src/auto-import.d.ts",
        }),
        Components({
            // 引入组件的,包括自定义组件
            // 存放的位置
            dts: "src/components.d.ts",
        }),
    ],
 
})

4、安装 router

npm

 npm install vue-router@4 
yarn

 yarn add vue-router@4

在src下创建一个 routes 文件夹，再创建一个 index.ts 文件

 import { createRouter, createWebHistory } from "vue-router";
 let routes= [
    {
        path: '/',
        name: 'home',
        //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
        component: () => import('../view/homeView.vue')
    },
    //{
        //配置404页面
        //path: '/:catchAll(.*)',
        //name: '404',
        //component: () => import(''),
    //}
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router 

main.ts文件引入

import { createApp } from 'vue'
import App from './App.vue'
 
 //routes
 import router from "./routes/index"; 
 
const app= createApp(App)
 
 //routes 
 app.use(router)  
app.mount('#app')

router安装好了，其它(页面)要自己配置,404页面未配置

注意事项：使用路由新人要注意的地方，以下是我的使用习惯（公司只有我一个前端）

1、一般情况，一级路由是框架，二级或三级才是展示内容的，正常情况最多三级路由，

我一般写三级路由时，二级只用来包含三级路由用的，不会写component组件

如图：

1、path属性第一位是否加 / ，第一级路由必须加，后面的子路由我推荐加如果你有三级路由，只有一级加的 / ，那么要使用 /a/b/c 能访问到c页面如果一二级加 / ，那么要使用 /b/c 能访问到c页面如果一二三级都加，那么要直接使用 /c 就能访问到c页面

总结：你最后第几级路由加 / 决定你网页的访问路径，推荐像我上面图片一样，path的

第一位都加 / ,这样访问起来很方便。

当然实际开发情况可能什么情况都有，如果你刚开始学，不懂找路由，使用vue开发工具devtools 查看，也很方便（没有下载的，下面那有教程）

5、安装pinia
因为是vue3+ts，安装pinia更好点，vuex拥抱ts没有pinia好

npm

 npm install pinia 
yarn

 yarn add pinia
 main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()
 
const app = createApp(App)
 
//pinia
app.use(pinia)
 
app.mount('#app')

在src下创建一个 store 文件夹，再创建一个 home.ts 文件

其它名也可以，因为pinia它有一个根文件，会把 defineStore 第一个参数当id值，相当于vuex中的 module 自动引入，也会在Vue.js devtools 插件中以第一个参数名展示（下面展示）

注意：defineStore第一个参数很重要，而且是唯一值。它的命名在devtools 插件能方便找到这个文件的数据，方便调试

import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之类的名字 
// defineStore('main',{..}) 在devtools 就使用 main 这个名
export const useMain = defineStore('main', {
    // 相当于data
    state: () => {
        return {
          // 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
          counter: 0,
          name: 'Eduardo',
        }
    },
    // 相当于计算属性
    getters: {
        doubleCount: (state) => {
            return state.counter * 2
        },
    },
    // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
    actions: {
        increment() {
          this.counter++
        },
        randomizeCounter() {
            setTimeout(() => {
                this.counter = Math.round(100 * Math.random())
            }, 0);
        },
    },
})

在要使用pinia的组件

以下使用只是用的比较常用的方法，还有其它方法请查看官网 pinia中文官网

<template>
    <div>counter:{{counter}}</div>
    <div>doubleCount:{{doubleCount}}</div>
    <a-button @click="main.randomizeCounter()">counter(round)</a-button>
    <a-button type="primary" @click="main.increment()">counter++</a-button>
 
    <div>{{name}}</div>
    <a-button @click="amend()">修改</a-button>
</template>
<script setup lang='ts'>
 
//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../store/home'
import { storeToRefs } from 'pinia';
 
const main = useMain()
// 解构main里面的state和getters的数据，
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据，不过这我只用来渲染
let { counter,name ,doubleCount } = storeToRefs(main)
 
//（常用方法三种）
//常用方法一： 使用数据
console.log( counter );
//使用方法(方法目前不能解构)
main.increment()
 
 
// 常用方法二：修改数据
counter = 9999
 
//常用方法三：
//进阶使用$patch，多个修改
const amend=()=>{
    main.$patch((state) => {
        state.counter += 10;
        state.name = '张三'
    })
}
 
</script>

Vue.js devtools 环境下通过 defineStore 第一个参数当id值找到对应的仓库
vue-devtools插件
如果你没有vue-devtools，而又想下载这里有一个教程下载

对vue-devtools的下载、编译、安装、使用

数据持久化插件
如果你想要数据持久化可以试下这个插件，简单使用

数据持久化插件