创建Vue2项目配置router以及Element-ui,还有访问组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

安装步骤

---

前言

在安装配置好Node.js的前提下

---

提示：以下是本篇文章正文内容，下面案例可供参考

(一) 安装步骤

1.在需要创建项目的文件路径中输入cmd打开小黑框

---

2.在小黑框输入命令  vue create 项目名

注意: 项目名最好由数字,字母,下划线组成,字母不可以大写. 

3.选择版本

Default ([Vue 2] babel, eslint)

然后选择

use NPM

创建成功

4.安装vue-router, element-ui,axios命令

npm install -s axios

npm install -s element-ui

npm install -s vue-router@3     // 指定3版本的

(二) 配置router及ElementUI

1.在项目根目录下的src文件中创建router文件夹

2.在router文件夹中创建index.js文件,并作如下配置

// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 在components中创建Home.vue组件,name为文件名'Home'
// 在此处导入该组件
import Home from '../components/Home.vue'   
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path:"/home",
            component:Home
        }
    ]
})

export default router  // 将其暴漏  其他组件就可以导入router

 3.配置main.js文件

//main.js
import router from './router'
import ElementUI from 'element-ui'  // 导入ElementUI
import 'element-ui/lib/theme-chalk/index.css'  // 导入样式
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,  // 将router写在这里
  render: h => h(App),
}).$mount('#app')

4.在App.vue文件中写入<router-view></router-view>即可

5.启动项目 访问：http://localhost:8080/home    即可访问 Home 组件

如有问题  请指出  一起学习 谢谢