位置: IT常识 - 正文

vite搭建vue2项目(vite2.0 vue)

编辑:rootadmin
vite搭建vue2项目 问题提出

推荐整理分享vite搭建vue2项目(vite2.0 vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:搭建vue项目流程,vue项目如何搭建,vite2.0 vue,vite vue2,vue2.0搭建,vite vue2,vite2.0 vue,vite搭建vue3,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

搭建过程1、初始化项目

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

1.1 创建项目

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

npm init vite@2.8.0

后续,安装如图

创建好项目后

// 1.进入项目cd vite-vue2// 2.安装依赖npm install// 3.启动项目npm run dev

效果图如下:

1.2 安装vite对vue2支持的插件在vite-vue2安装:vite-plugin-vue2// 注意:vite-plugin-vue2的版本为1.9.3npm 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 -S1.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

2、vue-router2.1 安装npm install vue-router@3.5.2 -S2.2 新建router目录2.2.1 创建路由表

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

// /src/router/module/home.jsexport const home = [{path: '/home',meta: { title: '首页' },component: () => import('@/views/home/Index.vue')}]// /src/router/module/index.jsimport { home } from './home'export const module = [...home]// /src/router下index.jsimport { module } from './module/index'import VueRouter from 'vue-router'import Vue from 'vue'// 使用VueRouterVue.use(VueRouter)const routes = [...module]const router = new VueRouter({mode: 'history',base: '/',routes})export default router2.2.2 创建路由指向的页面组件vite搭建vue2项目(vite2.0 vue)

在 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 -S3.2 新建vuex目录

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

// index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) // 使用Vuexexport 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 -S4.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'// 挂载全局MessageVue.prototype.$message = messageVue.use(Button)4.3 在main.js全局注册// main.js// 引入antdimport './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>

5、axios

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

5.1 安装npm install axios -S5.2 封装axios

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

// request.jsimport axios from 'axios'import { message } from 'ant-design-vue'// 创建axios实例// 创建请求时可以用的配置选项// 配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8const 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('信息校验失败')breakcase 401:// @ts-nocheckmessage.error('认证失败')breakcase 403:message.error('token校验失败')breakcase 404:message.error('请求的资源不存在')breakdefault:message.error(other)break}}// 添加响应拦截器instance.interceptors.response.use(// 响应包含以下信息data,status,statusText,headers,configres => {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 } = errif (response) {errorHandle(response.status, response.data)return Promise.reject(response)}message.error('请求失败')return true})export default instanceimport 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

本文链接地址:https://www.jiuchutong.com/zhishi/300700.html 转载请保留说明!

上一篇:Vue基础知识总结 11:前端路由vue-router(vue要掌握哪些知识?)

下一篇:利用vue实现登陆界面及其跳转(vue 登陆)

  • 拼多多如何取消绑定电话号码(拼多多如何取消订单申请退款)

    拼多多如何取消绑定电话号码(拼多多如何取消订单申请退款)

  • 电脑怎么撤销上一步操作(电脑怎么撤销上步操作)

    电脑怎么撤销上一步操作(电脑怎么撤销上步操作)

  • word怎么删除尾注(word怎么删除尾注导致的回车)

    word怎么删除尾注(word怎么删除尾注导致的回车)

  • 全民k歌被永久封号 有什么办法可以解封(全民k歌被永久封号图片)

    全民k歌被永久封号 有什么办法可以解封(全民k歌被永久封号图片)

  • 电脑只有两个盘怎么加(电脑只有两个盘不够用)

    电脑只有两个盘怎么加(电脑只有两个盘不够用)

  • 拼多多自己买的东西别人能看到吗(拼多多自己买的东西不让别人看)

    拼多多自己买的东西别人能看到吗(拼多多自己买的东西不让别人看)

  • 苹果笔记本能装windows吗(苹果笔记本能装office吗)

    苹果笔记本能装windows吗(苹果笔记本能装office吗)

  • iphone标记为丢失还能用吗(iphone标记为丢失等待中是什么意思)

    iphone标记为丢失还能用吗(iphone标记为丢失等待中是什么意思)

  • 拼多多拼团成功后取消订单,另一个人怎么办(拼多多拼团成功后可以退吗)

    拼多多拼团成功后取消订单,另一个人怎么办(拼多多拼团成功后可以退吗)

  • 闲鱼聊过的人删除了怎么找(闲鱼聊过的人删除了怎么找回)

    闲鱼聊过的人删除了怎么找(闲鱼聊过的人删除了怎么找回)

  • 手机号存在安全风险是什么意思(手机号存在安全风险多久解除)

    手机号存在安全风险是什么意思(手机号存在安全风险多久解除)

  • 手机零件被换怎么知道(手机零件被换怎么查)

    手机零件被换怎么知道(手机零件被换怎么查)

  • 苹果手机怎么打不开excel表格(苹果手机怎么打视频电话)

    苹果手机怎么打不开excel表格(苹果手机怎么打视频电话)

  • 西瓜视频能下载视频吗

    西瓜视频能下载视频吗

  • 小米8青春版充电功率(小米8青春版充不上电怎么回事)

    小米8青春版充电功率(小米8青春版充不上电怎么回事)

  • 台式电脑不用音响怎么出声(台式电脑不用音响怎么有声音)

    台式电脑不用音响怎么出声(台式电脑不用音响怎么有声音)

  • airpods滴滴两声什么意思(airpods嘀嘀两声)

    airpods滴滴两声什么意思(airpods嘀嘀两声)

  • 绿洲怎么看自己的邀请码(绿洲怎么看自己的评论)

    绿洲怎么看自己的邀请码(绿洲怎么看自己的评论)

  • 苹果11怎么打开广角(苹果11怎么打开电量百分比)

    苹果11怎么打开广角(苹果11怎么打开电量百分比)

  • 小天才z5充电多久(小天才z5充电多少瓦)

    小天才z5充电多久(小天才z5充电多少瓦)

  • nova3和nova4区别(nova3和nova4参数对比)

    nova3和nova4区别(nova3和nova4参数对比)

  • ctrl+e没反应(ctrl+e按了没反应)

    ctrl+e没反应(ctrl+e按了没反应)

  • ipad5th是什么型号(ipad5是什么版本)

    ipad5th是什么型号(ipad5是什么版本)

  • 美团瓜子积分怎么查看(美团积分抵现在哪里)

    美团瓜子积分怎么查看(美团积分抵现在哪里)

  • openAI api 生产最佳实践(open api平台)

    openAI api 生产最佳实践(open api平台)

  • 代扣代缴消费税的会计分录
  • 税务申报有什么技巧
  • 金税盘维护费全额抵扣冲减的管理费用怎样结转
  • 生产企业购入材料怎么做分录
  • 油费预付卡如何开发票
  • 预付账款属于什么账户
  • 承兑汇票贴现计算公式
  • 从对公账户提取备用金违法吗
  • 工程项目中的设备主要包括什么和什么
  • 领备用金时会计怎么做分录
  • 一般纳税人税控维护费怎么填报
  • 股东放弃本企业股权
  • 评估入账的开发权是否可以税前扣除?
  • 增值税发票的基数是什么
  • 小微企业所得税优惠政策
  • 广告服务类企业有哪些
  • 法院强制拍卖房子流程
  • 研发用的原材料怎么开领料单
  • mac苹果电脑系统
  • 原始凭证和记账凭证各应具备哪些内容
  • 知识产权 申请
  • xp系统鼠标右键不能用怎么办
  • macOSCatalina10.15.5正式版值得升级吗 macOSCatalina10.15.5更新了什么
  • 服务器数据迁移到新的服务器
  • 其他综合收益和其他收益的区别
  • 什么情况下计提信用减值损失
  • 返还土地出让金如何追缴的
  • 业务招待费能不能计入销售费用
  • 落枕怎么办怎么治疗
  • 场地租赁费需要计提吗
  • 计算所得税费用公式excel
  • 出让土地使用权和转让土地使用权的区别
  • 银行手续费未开发票
  • 买花木计入什么科目
  • 知名个人网站
  • echarts series name
  • setl指令
  • 增值税专用发票几个点
  • 每个月工资扣的税为什么不一样
  • 运营费的税率
  • 小规模销售收入超过500万
  • el-form表单
  • 织梦cms怎么样
  • 印花税已缴税额
  • sql server 2008使用
  • 增值税留底注销时怎么办
  • 收到的成本票怎么做账
  • 购买车辆的进项税怎么勾选
  • 年终奖金计入工资薪金所得吗
  • 票据贴现无效如何讨要票据款
  • 一次性补缴养老保险的最新规定
  • 原始凭证和记账凭证的区别
  • 软件开发的知识产权有哪些
  • 本年利润是什么科目?
  • 农业合作社成本有哪些
  • 一家公司一定要有一个社保吗
  • 建账的三个基本步骤
  • centos访问网页命令
  • win7与ubuntu双系统
  • win8装不了itunes
  • linux rm 命令删除文件恢复
  • windows8如何共享打印机
  • win8系统电脑卡
  • string获取文件名
  • linux怎么调用python
  • javascript组件
  • 搭建nodejs
  • 使用权资产
  • node.js详解
  • angular js表达式
  • android按钮怎么放置在下方
  • python结合了什么的高级语言
  • 广告费属于什么会计科目
  • 河南省地方税务局房产税管理办法
  • 成都市老年公交卡年审地点
  • 如何查询税务是否变更
  • 辽宁省国家税务局官网
  • 东莞市国税局南城莫
  • 本期应纳的增值税
  • 湖南自然人电子税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设