在HBuilder中怎么创建Vue项目

软件信息：HBuilder X 3.1.18

目录

1、新建Element-UI项目

2、更改App.vue内容

3、在src中创建router文件夹并新建index.js文件

4、在src中创建components文件夹存放组件

5、在src中创建views文件夹存放页面

6、在main.js文件中配置路由

7、下载vue-router和vue-axios

---

1、新建Element-UI项目

2、更改App.vue内容

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

<script>
export default {
  methods: {
    
    }
  }
}
</script>

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

3、在src中创建router文件夹并新建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
// import Index from '../views/index.vue'
// import Xq from '../views/xq.vue'


//安装路由
Vue.use(VueRouter)


//配置导出路由
export default new VueRouter({
	mode: 'history',
	routes: [
		// 动态路径参数 以冒号开头 path: '/user/:id',
		// {
		// 	//路径
		// 	path: '/',
		// 	//起名字
		// 	name: 'Index',
		// 	//组件
		// 	component: Index
		// }
		// ,
		// {
		// 	//路径
		// 	path: '/detail/:bookid',
		// 	//起名字
		// 	name: 'Detail',
		// 	//组件
		// 	component: Detail
		// }
	]
})

4、在src中创建components文件夹存放组件

5、在src中创建views文件夹存放页面

6、在main.js文件中配置路由

import router from './router/index.js'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.prototype.$httpApi = axios
Vue.use(VueAxios, axios)

 7、下载vue-router和vue-axios

在终端中依次执行以下命令

npm install vue-router

npm install --save axios vue-axios

如果出现以上错误说明版本不兼容，尝试以下命令

npm install vue-router@3.2.0 

根据提示再进行修复

npm audit fix

或者

npm audit fix --force

在package.json中可以查看到vue的版本