vue 的web端项目搭建

清疚 2022-08-29 13:47 178阅读 0赞

在HBuilder X新建一个element-starter项目![在这里插入图片描述][4ba71e8f24b51db44a8c9641d69b8381.png_pic_center]  
运行npm![在这里插入图片描述][b5f50ade63bc7034b20ac9083befb5ce.png_pic_center]  
运行–运行到内置浏览器，就可看到内容了

现在来进行配置路由route  
项目结构如下：![在这里插入图片描述][be708f85af2d1287ecdffbe106cb7812.png_pic_center]  
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+
    
    const router = new VueRouter({  routes });
     
    new Vue({ 
      el: '#app',
      router,
      render: h => h(App)
    })

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

npm install vue-router

可能遇到的问题：  
**1、项目运行**  
webpack: Compiled successfully.  
如果这句之前有报错，可把node\_modules文件夹删除，然后右键项目–外部命令npm install

需手动输入地址访问，这里的端口号 需看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

[4ba71e8f24b51db44a8c9641d69b8381.png_pic_center]: /images/20220829/dacf58622de74be0b5b97e5bdb08a3c8.png
[b5f50ade63bc7034b20ac9083befb5ce.png_pic_center]: /images/20220829/f96f9724193f4c828779287b2abeca46.png
[be708f85af2d1287ecdffbe106cb7812.png_pic_center]: /images/20220829/36f90e5df3ed4df5a795a08b0a4b5b3c.png