1.打开HBuilder新建一个项目


2.在package.json文件下的dependencies下加入router的相关配置（“vue-router”: “^3.5.3”），如下示例：

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.15.6",
    "vue": "^2.6.10",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

3.打开这个项目的终端，运行npm install，这样vue的router就加载进来了

如果报错了，如下图
设置成国外镜像，输入命令：

 npm config set registry http://registry.npmjs.org 

重新运行npm install

4.添加elementUI：在本终端执行：npm i element-ui -S，完成后可以在项目下的node_modules里面找到elementui文件夹，同时在mian.js文件中导入下面五局代码：

/* 使用elementUI组件 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/* 引入路由，才能使用，记得在下面的new Vue里注册这个路由 */
import router from './routers.js'
 
/* 让vue使用elementUI */
Vue.use(ElementUI);
/* 让vue使用router */
Vue.use(router);

5. 在components文件夹下创建一个组件，记得首字母大写
   Selection.vue文件代码

<template>
    <div>
		<h1>这是一个下拉选组件</h1>
    </div>    
	
</template>
 
<script>
	export default {
		name: 'Selection',
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>
 
<style scoped>

6.创建好了组件的第一步就是去路由里注册：在src目录下创建routers.js文件，相关注册代码如下

import Vue from 'vue'
import Router from 'vue-router'
import Selection from './components/Selection.vue'
 
 
Vue.use(Router)
 
export default new Router({
	routes: [
		{path: '/selection',component:Selection},
	]
})

7.在App.vue文件中加入刚才注册的路由（用超链接方式）

8.打开本项目终端：运行：npm run serve 运行成功后去localhost:8080 访问即可

成功了！