(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应用
-
清空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