vite搭建vue2项目

news2025/2/24 7:41:13

问题提出

最近在做一个练习的小项目，由于要配合组成员的其它成员来搭建项目，大多掌握的技术栈都在vue2，用惯了vite来搭建（vite真香~）,就想着来搭建一个vue2的项目。原本以为查下百度很快可以搭好，没想到折腾了一早上。。。。

⭐️文章结尾会给出我的package.json文件

搭建过程

1、初始化项目

vite提供了对应的npm命令可以创建各种框架的项目，但是vite在创建vue项目时，默认直接创建vue3，因此这里我们使用原生项目进行创建

1.1 创建项目

注意：这里vite的版本采用2.8.0的,最新的版本创建后续会出现问题

npm init vite@2.8.0

后续，安装如图

image-20220727202140999

创建好项目后

// 1.进入项目
cd vite-vue2

// 2.安装依赖
npm install

// 3.启动项目
npm run dev

效果图如下：

image-20220727202833751

1.2 安装vite对vue2支持的插件

  • 在vite-vue2安装：vite-plugin-vue2
// 注意：vite-plugin-vue2的版本为1.9.3
npm install vite-plugin-vue2@1.9.3 -D
  • 在根目录创建vite.config.js文件，来注册插件
import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default () =>
	defineConfig({
		plugins: [createVuePlugin()],
		server: {
			open: true, //自动打开浏览器
			port: 1567 //端口号
		},
		resolve: {
            // 别名
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})

1.3 安装vue依赖

  • npm命令安装

写本文时,通过npm install vue安装会直接安装3.0版本的因此要指定好vue版本

npm install vue@2.x vue-template-compiler@2.x -S

1.4 修改项目文件结构

1.4.1 创建src目录

在项目根目录下创建src目录，然后把main.js移到src目录里

import Vue from 'vue'
import App from './App.vue'

new Vue({
	render: h => h(App)
}).$mount('#app')
1.4.2 修改index.html

修改项目启动的入口文件

// index.html
  <script type="module" src="/src/main.js"></script>
1.4.3 创建App.vue文件

代码如下：

<template>
  <div>Hello Vite Vue2</div>
</template>

1.5 运行一下项目

再次运行下项目检验一下之前配置有无问题

npm run dev

image-20220727230045482

2、vue-router

2.1 安装

npm install vue-router@3.5.2 -S

2.2 新建router目录

2.2.1 创建路由表

在src目录下创建router目录，并在router目录下创建index.js文件和module目录，在module目录下创建home.js和index.js。这里采用分模块来存放路由表

// /src/router/module/home.js
export const home = [
	{
		path: '/home',
		meta: { title: '首页' },
		component: () => import('@/views/home/Index.vue')
	}
]

// /src/router/module/index.js
import { home } from './home'

export const module = [...home]

// /src/router下index.js
import { module } from './module/index'
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用VueRouter
Vue.use(VueRouter)

const routes = [
	...module
]

const router = new VueRouter({
	mode: 'history',
	base: '/',
	routes
})

export default router
2.2.2 创建路由指向的页面组件

在 src 目录下创建 views 目录，用来存放页面组件。

在 src/views/home 目录下创建1个页面：Index.vue

<template>
  <div>
    Home
  </div>
</template>

2.3 全局注册

2.3.1 在main.js里注册
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
2.3.2 创建路由跳转标签

修改App.vue文件

<template>
  <div id="app" class="app">
    <router-view></router-view>
  </div>
</template>

3、vuex

vuex作为大型单页面的状态管理器，使用起来十分方便，在有mapState、mapMutation等语法糖的引入变得更加的简单，但当项目比较小的时候可以不引入，可能会变得臃肿起来，这里为了学习就引入进来了~

3.1 安装

npm install vuex@3.6.2 -S

3.2 新建vuex目录

在src目录下创建store目录，并在store目录下创建index.js

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 使用Vuex
export default new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			state.count++
		}
	},
	actions: {},
	modules: {}
})

3.3 全局注册

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store'
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4、组件库

这里组件库我采用了阿里推荐的ant-design-vue，版本采用1.x才兼容vue2

4.1 安装

npm install ant-design-vue@1.7.8 -S

4.2 按需引入

ps:在官网看半天还以为要引入babel-plugin-import 来按需引入，搞半天最后发现可以直接引入。。。。

在src建立目录plugin/antd目录，在下面创建index.js文件，代码如下：

import Vue from 'vue'

import { Button, message } from 'ant-design-vue' // 按需引入
import 'ant-design-vue/dist/antd.css' // or 'ant-design-vue/dist/antd.less'

// 挂载全局Message
Vue.prototype.$message = message

Vue.use(Button)

4.3 在main.js全局注册

// main.js

// 引入antd
import './plugin/antd'
new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

4.4 在页面中使用

<template>
  <div>
    <a-button type="dashed" @click="onClick">
      Dashed
    </a-button>
  </div>
</template>

<script>
export default {
  mounted() {
  },
  methods: {
    onClick() {
      this.$message.info('This is a normal message');
    }
  }
}
</script>

image-20220727235405317

5、axios

本文会对axios做一个简单的封装。

5.1 安装

npm install axios -S

5.2 封装axios

在src创建http目录，在其下面创建request.js和home.js

// request.js
import axios from 'axios'
import { message } from 'ant-design-vue'
// 创建axios实例
// 创建请求时可以用的配置选项

// 配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
const contentType = 'application/json;charset=UTF-8'

const instance = axios.create({
	/**
	 * 是否携带cookie,注意若携带cookie后端必须配置
	 * 1.Access-Control-Allow-Origin为单一域名(具体到IP + port,用localhost貌似不行)
	 * 2.需要带上响应头Access-Control-Allow-Credentials
	 */
	// withCredentials: true,
	timeout: 1000,
	baseURL: 'http://localhost:8000/api/v1',
	headers: {
		'Content-Type': contentType
	}
})
// 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 => {
		const token = window.sessionStorage.getItem('token')
		if (token) {
			config.headers.Authorization = token
		}
		return config
	},
	error => {
		return Promise.reject(error)
	}
)
const errorHandle = (status, other) => {
	switch (status) {
		case 400:
			message.error('信息校验失败')
			break
		case 401:
			// @ts-nocheck
			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 => {
		if (res.data && res.data.code !== 0 && !(res.data instanceof Blob)) {
			message.error(res.data.msg || '服务器出错!')
		}
		// 请求通用处理
		return res.data
	},
	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

import request from './request'

export default {
  getList(model) {
    return request({
      url: '/theme/list',
      method: 'post',
      data: model
    })
  },
}

5.3 在页面中使用

<script>
import $http from '@/http/home.js'
export default {
  mounted() {
      
  },
  methods: {
      async onSubmit(){
          const res = await $http.getList({});
          console.log(res)
      }
  }
}
</script>

总结

以上就是我用vite搭建vue2项目的一个全过程啦。希望对大家搭建项目有所帮助，如果有帮助的话，欢迎给文章点个赞👍也欢迎留言提问❓

⭐️最后的最后，附上我的package.json文件（这点真的很重要😰）

{
  "name": "vite-vue2",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vite": "^2.8.0",
    "vite-plugin-vue2": "^1.9.3"
  },
  "dependencies": {
    "ant-design-vue": "^1.7.8",
    "axios": "^0.27.2",
    "qs": "^6.11.0",
    "vue": "^2.7.8",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.7.8",
    "vuex": "^3.6.2"
  }
}

9.16更新

感谢评论区网页的提问意见。解决了两个问题

  • 安装vue-router时应该是npm install vue-router@3.5.2 -S
  • 使用npm run build之后用npm run preview会出现require is not defined的问题。这个可以参考这篇文章vue cli改造vite最佳实践。注意：经过实践，本项目出现的根源在于组件库ant-design-vue的问题，这里需要在vite.config.js加入如下的配置：
resolve: {
	alias: [
		// 忽略其他代码
		{ find: /ant-design-vue$/, replacement: 'ant-design-vue/dist/antd.min' } // 解决关键点。
	]
},

参考资料

Vite官方文档

vite-plugin-vue2插件

Vue.js

Vue-router

Vuex

ant-design-vue

axios

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405828.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【小程序从0到1】WXSS模版语法汇总

【小程序从0到1】WXSS模版语法汇总

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…
阅读更多...
微前端vue项目实战 -- 乾坤qiankun框架 （一）

微前端vue项目实战 -- 乾坤qiankun框架 （一）

背景&#xff1a; 公司研发的项目主要是 GIS地图为基础的管理系统&#xff0c;由主体项目&#xff08;管理业务模块&#xff09; GIS地图应用&#xff0c;由于 GIS地图应用模块 会在多个地方使用&#xff0c;所以单独构建一个项目&#xff0c;分别在不同的业务场景中引用、交互…
阅读更多...
JavaScript鼠标移动事件及案例

JavaScript鼠标移动事件及案例

一、鼠标点击事件 1.onclick单击事件 鼠标单击时事件处理函数 <input type"button" id"bt" value"点击"> <script> //找到按钮并设置点击事件 document.getElementById("bt").onclick function (){ //被点击…
阅读更多...
kkFileView部署及使用

kkFileView部署及使用

Windows:kkFileView部署及使用前言部署Web引用普通webVue &#xff1a;需要引入base64.js前言 kkFileView支持主流文档的在线预览服务。官网地址 部署 kkFileView不需要集成&#xff0c;只需要部署到服务器即可。 从 Gitee 上下载最新的压缩包&#xff0c;或者从代码仓库中下…
阅读更多...
【Vue+element-ui搭建前端页面】适用于初学者学习

【Vue+element-ui搭建前端页面】适用于初学者学习

作者有话说&#xff1a; 学习编程我们必不可少的就是做项目&#xff0c;在学习后端的同时&#xff0c;前端知识也是要学习滴&#xff0c;这篇文章将展示如何利用Vue和element-ui搭建前端界面。话不多说&#xff0c;进入主题&#xff01;&#xff01;&#xff01; 目录 首先是…
阅读更多...
网页报错“Form elements must have labels”的处理

网页报错“Form elements must have labels”的处理

网页报错“Form elements must have labels”的处理 先给出错误现象源码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width&quo…
阅读更多...
uniapp中单选按钮的实现

uniapp中单选按钮的实现

标签说明&#xff1a; radio-group&#xff1a;单项选择器&#xff0c;内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下&#xff0c;实现这些radio的单选。 radio&#xff1a;单选项目 属性说明&#xff1a; change&#xff1a;<radio-group>…
阅读更多...
Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框

Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框

1.需求描述 想要实现点击一个按钮就弹出一个对话框&#xff0c;在对话框中可输入数据进行提交&#xff0c;在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row><el-button type"primary" plain>新增</el…
阅读更多...
Java支付宝沙箱环境支付，SDK接口远程调试【内网穿透】

Java支付宝沙箱环境支付，SDK接口远程调试【内网穿透】

文章目录1.测试环境2.本地配置3. 内网穿透3.1 下载安装cpolar内网穿透3.2 创建隧道4. 测试公网访问5. 配置固定二级子域名5.1 保留一个二级子域名5.2 配置二级子域名6. 使用固定二级子域名进行访问1.测试环境 MavenSpring bootJdk 1.8 2.本地配置 获取支付宝支付Java SDK,ma…
阅读更多...
Vue--》过滤器介绍及其使用方法

Vue--》过滤器介绍及其使用方法

目录 过滤器 过滤器的兼容性 私有过滤器和全局过滤器 过滤器的连续调用 过滤器进行传参 过滤器 过滤器的兼容性 注意&#xff1a;Vue3中明确取消了过滤器这个功能&#xff0c;如果想使用只能在Vue2中进行&#xff0c;如果所做的项目是Vue2的话&#xff0c;可以了解一下这…
阅读更多...
uni-app开发微信小程序，H5 关于压缩上传图片的问题

uni-app开发微信小程序，H5 关于压缩上传图片的问题

文章目录 前言 一、为什么要压缩图片 二、图片压缩方式 1. 微信小程序​​​​​​​ 2. H5 总结 前言 关于微信小程序、H5兼容性问题&#xff0c;今天就压缩以及上传图片做一个可实现方法的简要阐述。 一、为什么要压缩图片​​​​​​​ 在使用uni-app开发小程序及H…
阅读更多...
深入了解-微信开发者工具

深入了解-微信开发者工具

主要介绍微信开发者工具如何编译小程序代码&#xff0c;如何实现小程序模拟器以及如何调试小程序。 1 简介 虽然在开发语言层面小程序与传统的网页差别不大&#xff1a;是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来…
阅读更多...
B/S架构

B/S架构

目录 一、什么是B/S架构 二、三层架构 三、Active技术 四、网络节点 五、分布式网络计算 六、JavaScript 一、什么是B/S架构 1.B/S架构是软件系统体系结构&#xff0c;是指浏览器-Web服务器(Broswer-Server)&#xff0c;采用三层架构&#xff0c;即表现层、业务逻辑层、数据访问…
阅读更多...
十分钟带你入门Chrome插件开发

十分钟带你入门Chrome插件开发

一、简述 我们所说的chrome插件一般都是指chrome扩展程序&#xff08;Chrome Extension&#xff09;。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件&#xff0c;它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器…
阅读更多...
【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿，参与评论，即可有机获得

【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿，参与评论，即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《Flask Web全栈开发实战》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 内容提要❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《Flask Web全栈开发实战》 内容简介&#xff1a; 《Flask Web全栈开发…
阅读更多...
flex布局 多种方法让两个盒子分布在左右两边

flex布局 多种方法让两个盒子分布在左右两边

方法一&#xff1a; 一个父盒子里面包含了两个子盒子的&#xff0c;可以用justify-content:space-between属性 <div classparent> <div class"left"></div> <div class"right"></div> </div> .parent { disp…
阅读更多...
FreeRTOS(教程非常详细）

FreeRTOS(教程非常详细）

概述&#xff1a; 之前写了关于FreeRTOS的部分内容&#xff0c;为了方便阅读&#xff0c;现在给汇总到一起了。全部学习完后&#xff0c;恭喜你对FreeRTOS有了更深的认知。 第一章 FreeRTOS移植到STM32 第二章 FreeRTOS创建任务 第三章 FreeRTOS任务管理 第四章 FreeRTOS消…
阅读更多...
【springcloud 微服务】Spring Cloud Ribbon 负载均衡使用策略详解

【springcloud 微服务】Spring Cloud Ribbon 负载均衡使用策略详解

目录 一、前言 二、什么是Ribbon 2.1 ribbon简介 2.1.1 ribbon在负载均衡中的角色 2.2 客户端负载均衡 2.3 服务端负载均衡 2.4 常用负载均衡算法 2.4.1 随机算法 2.4.2 轮询算法 2.4.3 加权轮询算法 2.4.4 IP地址hash 2.4.5 最小链接数 三、Ribbon中负载均衡策略…
阅读更多...
Unity 实现A* 寻路算法

Unity 实现A* 寻路算法

前言 A* 寻路算法是什么 游戏开发中往往有这样的需求&#xff0c;让玩家控制的角色自动寻路到目标地点&#xff0c;或是让 AI 角色移动到目标位置&#xff0c;实际的情况可能很复杂&#xff0c;比如地图上有无法通过的障碍或者需要付出代价&#xff08;时间或其他资源&#x…
阅读更多...
XShell免费版的安装配置教程以及使用教程（超级详细、保姆级）

XShell免费版的安装配置教程以及使用教程（超级详细、保姆级）

目录 一、 XShell的作用 二、 下载免费版XShell 三、 安装XShell 四、使用XShell连接Linux服务器 一、 XShell的作用 XShell 是一种流行且简单的网络程序&#xff0c;旨在模拟虚拟终端。XShell可以在Windows界面下来访问远端不同系统下的服务器&#xff0c;从而比较好的达到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023