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
相关推荐
喵叔哟32 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕2 小时前
Django 搭建数据管理web——商品管理
前端·python·django