vue ——Hbuilder搭建web端项目

在hbx新建一个element-starter项目

 运行npm

 选择第一个npm install

运行--运行到内置浏览器

就可以看到内容了

现在来进行配置路由route

项目结构如下：

 route.js代码：

import Index from '../pages/index/index.vue'; 

const routes = [
    { path: '/', component: Index },  
];

export default routes;

App.vue代码：

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

<script>
	export default {
		name: 'App',
		mounted() {},
		methods: {

		}
	}
</script>

<style>
	#app {
		font-family: Helvetica, sans-serif;
		text-align: center;
	}
</style>

main.js代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

// wy+
import VueRouter from 'vue-router'
import routes from './rounter/route.js'

// wy+
Vue.config.productionTip = false;

Vue.use(ElementUI)
Vue.use(VueRouter);// wy+

// wy+
const router = new VueRouter({ routes });

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

最后需要安装vue-router，安装命令为：npm install vue-router。

项目源码地址：element-starter(添加路由route).zip-HTML5文档类资源-CSDN下载

遇到的问题有：

1、项目运行

webpack: Compiled successfully.
如果这句话之前有报错，可以把node_modules文件夹删除，然后右键项目--外部命令npm install
看到这句话说明：webpack已经运行成功了，但是还是没有看到网页该有的页面，这时候需要手动输入：http://127.0.0.1:8010/，这里的端口号需要看
到webpack.config.js的文件里查看devServer

2、HBX默认安装npm的路径为：

D:\wangyao\HBuilderX\plugins\npm\npm.cmd run build

例如安装vue-router可以使用这样的命令：

D:\wangyao\HBuilderX\plugins\npm\npm install vue-router