vite前端构建

(4条消息) Vite基本使用_vite启动命令_DB_鸠的博客-CSDN博客

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应用

1. 清空src里面的App.vue文件

2. 在 src/main.js 中按需导入 createApp 函数

3. 定义 App.vue 根组件，导入到 main.js

4. 使用 createApp 函数基于 App.vue 根组件创建应用实例

5. 挂载至 index.html 的 #app 容器

   main.js

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

   App.vue

   index.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