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

    <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
相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端