vite前端构建 - 技术栈

vite

官网：vite是一种新型前端构建工具，能够显著提升前端开发体验

网络：vite是一个静态服务器，也可以说是一个开发的构建工具

它的目标就是提供快速的开发体验和性能优化

vite优点与缺点

Vite 优点	Vite 缺点
开发服务器比 Webpack 快 10-100 倍	只能针对现代浏览器（ES2015+）
将 code-splitting 作为优先事项	与 CommonJS 模块不完全兼容
快速响应的模块更新热重载（HMR）	最小的脚手架不包括 Vuex、路由器等
	不同的开发服务器与构建工具

快速启动、轻量、现代化、配置流程简单

创建项目

1.初始化项目

复制代码

npm init vite@latest

或者

npm create vite@latest

配置项目的基本信息

如果已经全局安装过就可以直接下一步

2.安装默认依赖

项目的名称
基础模板
是否使用typescript

预览效果

输入以下指令

至此，一个vue3的项目已经成功创建出来了

1.安装依赖：终端里安装：

复制代码

npm install				yarn

2.运行开发服务器：启动vite

复制代码

npm run dev				yarn dev

3.进行开发：你可以在项目中进行开发。

4.构建项目：当你完成了开发，准备部署时：

复制代码

npm run build			yarn build

Vite 会根据配置将项目代码打包、优化和压缩，并生成可用于生产环境部署的静态文件。

编写Vue应用

清空src里面的App.vue文件
在 src/main.js 中按需导入 createApp 函数
定义 App.vue 根组件，导入到 main.js
使用 createApp 函数基于 App.vue 根组件创建应用实例
挂载至 index.html 的 #app 容器

main.js

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

App.vue
<template>
我是根组件,Hello
</template> <script> export default { name: 'App', } </script>
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body>
<script type="module" src="/src/main.js"></script> </body> </html>
npm run dev

vuex

1.安装

复制代码

npm install vuex@next

2.创建vuex文件夹，在index.js中写入以下代码

复制代码

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state) {
      state.count += 1
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state) {
      return 2 * state.count
    }
  }
})

3.挂载

复制代码

import vuex from '@vuex/index'

createApp(App).use(router).use(vuex).mount('#app')

axios

1.安装

复制代码

npm install axios

2.配置
创建utils文件夹，在文件夹里创建一个名为http.js的文件
写入以下内容

复制代码

import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
// 创建请求时可以用的配置选项

const instance = axios.create({
  withCredentials: true,
  timeout: 1000,
  baseURL: ''
})
// axios的全局配置
instance.defaults.headers.post = {
  'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
  'Auth-Type': 'company-web',
  'X-Requested-With': 'XMLHttpRequest',
  token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

const errorHandle = (status, other) => {
  switch (status) {
    case 400:
      Message.error('信息校验失败')
      break
    case 401:
      Message.error('认证失败')
      break
    case 403:
      Message.error('token校验失败')
      break
    case 404:
      Message.error('请求的资源不存在')
      break
    default:
      Message.error(other)
      break
  }
}

// 添加响应拦截器
instance.interceptors.response.use(
  // 响应包含以下信息data,status,statusText,headers,config
  (res) => (res.status === 200 ? Promise.resolve(res) : Promise.reject(res)),
  (err) => {
    Message.error(err)
    const { response } = err
    if (response) {
      errorHandle(response.status, response.data)
      return Promise.reject(response)
    }
    Message.error('请求失败')
    return true
  }
)

export default instance

3.引入

在需要的地方引入

复制代码

import Http from '@/utils/http'

less

安装后即可使用

复制代码

npm i less -D