[微前端实战]---033vue2 - 新能源子页面

vue2 - 新能源子页面

一. 项目目录

• main (主应用)
• platform (发布平台)
• react15
• react16
• service (服务端)
• vue2
• vue3
• package.json
• README.md

二.创建项目

vue项目: 使用vue命令创建项目

$ npm install -g @vue/cli //这个是从国外下载的比较慢
$ cnpm install -g @vue/cli //这个是从镜像源下载
1
2

$	 vue create vue2
1

https://blog.csdn.net/weixin_44882488/article/details/124220864

react: 应用使用create app 创建

$	npm install -g create-react-app
1

$	create-react-app react16
1

https://blog.csdn.net/oowweb/article/details/114481981

新建项目目录如下:

然后进入vue2 项目中执行命令

启动项目

$	npm run server
1

三.基础配置

3.1 安装vue-router

npm install vue-router@3.5.1 --save
1

3.2 实例代码

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import Energy from '../pages/energy';

Vue.use(VueRouter)

const routes = [ 
    {
        path:'/energy',// 新能源页面
        name:'Energy',
        component: Energy
    }
]


// 创建router实例
const router = new VueRouter({
    mode: 'hash', // 使用hash 路由
    routes
})

export default router // 暴露当前路由并导出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

main.js

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

// 引入路由
+ import router from './router';

Vue.config.productionTip = false

new Vue({
+ router,
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13

pages/energy/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

访问http://localhost:8080/#/energy, 查看项目是否配置成功.

vue2 初始化

四.项目查看

这里导入先前代码, 查看结果

feat: 导入之前的项目配置(完成vue2)

bug

1. 缺少项目包

查找原因，是因为刚创建的项目没有引入路由, 安装包之后重启,

npm install vue-router --save
1

这里重新安装还是会报错, 这里查看 安装npm的源,并清除代理

首先查看当前的代理设置

npm config get proxy
==> null
1
2

清除代理

npm config delete proxy
1

查看机器中的npmrc配置:

这时候发现这个源有问题

然后使用nrm 方式修改镜像源

下载 nrm：

$	npm install -g nrm
1

查看可切换的镜像源：(*表示正在使用的镜像源)

$ 	nrm ls 
1

* npm -------- https://registry.npmjs.org/ `官方源`
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/       `淘宝源`
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/


1
2
3
4
5
6
7
8
9

修改镜像源, 这里推荐使用官方源/淘宝源

$	nrm use npm /nrm use taobao
1

清除node_modules,之后执行npm install vue-router --save , npm install 还是报错

这里是因为

1. vue-router4 的路由和vue-router3 的路由不太一样, 需要使用相应的包
2. vue-router 版本比较高

一般安装旧版本即可

运行如下命令安装指定版本

$	npm install vue-router@3.5.1 --save-dev
1

重新安装后, 执行npm run serve 项目即可重新启动

2.router与route区别

routes: 路由

router: 路由器, 路由表