网站建设原理与实践,即时灵感网站,长春火车站到龙嘉机场高铁时刻表,制作网络广告教学设计本篇主要讲了将v2项目转变为v3版本#xff0c;以本人经验愿于各位分享 希望大家可以一起交流#xff01;#xff01;#xff01;#xff01; 文章目录一、app 出口位置二 、 index.js 路由配置三、package.json 文件四、 main.js 既然安装插件那就需要引入五、 跨域问题总…本篇主要讲了将v2项目转变为v3版本以本人经验愿于各位分享 希望大家可以一起交流 文章目录一、app 出口位置二 、 index.js 路由配置三、package.json 文件四、 main.js 既然安装插件那就需要引入五、 跨域问题总结首先需要一个完整的v2版本的项目
vue2版本思路首先需要手工创建一个vuecli 整个项目分为 三部分 头部标题通用管理系统 主体左侧下拉列表 和 右侧主体内容 尾部Frontend 2022 Csaey。
正文如下
一、app 出口位置
templatediv idapprouter-view/router-view!-- i classfa fa-wifi/i --/div
/templatescript
export default {name: App,components: {},mounted() {},
};
/scriptstyle
import url(./assets/css/reset.css);
html,
body {width: 100%;height: 100%;
}
#app {width: 100%;height: 100%;font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;/* margin-top: 60px; */
}
/style
二 、 index.js 路由配置
完整版 需要写哪点再配置哪点 慢慢捋思路
import Vue from vue
import Router from vue-routerVue.use(Router)export default new Router({routes: [{path: /,redirect:login,name: 登录页,hidden:true,component: ()import(/components/Login)},{path: /login,name: login,hidden:true,component: ()import(/components/Login)},{path: /home,name: 学生管理,redirect:/home/student,iconClass:fa fa-users,component: () import(/components/Home),children: [{path: /home/student,name: 学生列表,iconClass: fa fa-list,component:()import(/components/students/StudentList)},{path: /home/info,name: 信息列表,iconClass: fa fa-list-alt,component:()import(/components/students/InfoList)},{path: /home/infos,name: 信息管理,iconClass: fa fa-list-alt,component:()import(/components/students/InfoLists)},{path: /home/work,name: 作业列表,iconClass: fa fa-list-ul,component:()import(/components/students/WorkList)},{path: /home/words,name: 作业管理,iconClass: fa fa-th-list,component:()import(/components/students/WorkMenu)},]},{path: /home,name: 数据分析,redirect:/home/dataview,iconClass: fa fa-bar-chart,component: () import(/components/Home),children: [{path: /home/dataview,name: 数据概览,iconClass: fa fa-line-chart,component:()import(/components/dataAnalysis/DataView)},{path: /home/mapview,name: 地图概览,iconClass: fa fa-line-chart,component:()import(/components/dataAnalysis/MapView)},{path: /home/score,name: 分数地图,iconClass: fa fa-line-chart,component:()import(/components/dataAnalysis/ScoreMap)},{path: /home/travel,name: 旅游地图,iconClass: fa fa-line-chart,component:()import(/components/dataAnalysis/TravelMap)},]},{path: /users,name: 用户中心,iconClass: fa fa-user,component: () import(/components/Home.vue),children: [{path: /users/user,name: 权限管理,iconClass: fa fa-user,component: () import(/components/user/User.vue),}]},{path: *,name: NotFound,hidden:true,component: ()import(/components/NotFound)},],mode: history
})三、package.json 文件
基本用到什么插件安装什么插件。我这边是直接贴上完整的。 如另需切记记得安装
{name: project-v2,version: 0.1.0,private: true,scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint},dependencies: {axios: ^0.27.2,core-js: ^3.6.5,element-ui: ^2.15.8,less: ^3.13.1,less-loader: ^7.3.0,node-sass: ^6.0.1,sass-loader: ^10.0.1,vue: ^2.6.11,vue-router: ^3.5.3},devDependencies: {vue/cli-plugin-babel: ~4.5.15,vue/cli-plugin-eslint: ~4.5.15,vue/cli-service: ~4.5.15,babel-eslint: ^10.1.0,babel-plugin-component: ^1.1.1,echarts: ^4.9.0,eslint: ^6.7.2,eslint-plugin-vue: ^6.2.2,font-awesome: ^4.7.0,qs: ^6.10.3,vue-template-compiler: ^2.6.11},eslintConfig: {root: true,env: {node: true},extends: [plugin:vue/essential,eslint:recommended],parserOptions: {parser: babel-eslint},rules: {}},browserslist: [ 1%,last 2 versions,not dead]
}
如果懒 可以 c 复 v粘 然后懒人安装在文件终端或者黑窗口输入 cnpm i 或者 npm i 一键安装 需要网
四、 main.js 既然安装插件那就需要引入
部分注释
import Vue from vue
import App from ./App.vue
import router from ./router//简称 饿了么 ui vue2用这个饿了么版本
import ElementUI from element-ui;//引入
import element-ui/lib/theme-chalk/index.css;//引入所需图标
import font-awesome/css/font-awesome.min.cssimport axios from axios//封装api
import service from ./api/service
//好用的插件 地图什么都有 可以去官网看
import echarts from echarts// 挂载到vue原型中就可以全局使用
Vue.prototype.service service
Vue.prototype.$echarts echarts
Vue.prototype.axios axios
Vue.use(ElementUI);
Vue.config.productionTip falsenew Vue({router,render: h h(App),
}).$mount(#app)
五、 跨域问题
注修改切记要重启项目
module.exports {devServer: {// 运行时自动打开open: true,// 大部分时间不需要使用// host: localhost,proxy: {//自己命名/api: {//确定接口可用再放target: http://1.116.64.64:5004/api2,changeOrigin: true, // 允许跨域pathRewrite: {^/api: }}}}
}总结
本章主要讲项目的基本配置详解没写登录之前先不要写主要内容 因为还要验证token值 如果格式正确 则会跳转到home 。 home页是主要内容然后用组件拼接成一个完整项目 下章写 登录页面跳转 和封装api 设置token 下节链接待补发 主要是不想加班^ 0 ^
