提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
目录
前言
在安装配置好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 组件
如有问题 请指出 一起学习 谢谢