首先强调，创建vue-cli项目的前提是必须要安装node.js文件，否则无法安装，vue的版本过高会有一些问题，比如在win7的系统无法运行vue3，亲测
第一步，找到你要创建项目的文件夹，按图示输入cmd
[图1]
第二步，输入命令，这里我们要创建的是个vue2的项目
vue create 项目名，这里起名不太规范，不过只是为了测试
然后按下回车
vue create vue2_test1_router
【图2】
随后会选择vue的版本，这里选择第二个的默认安装，随后按下回车等待即可
【图三】
安装完成后使用命令cd vue create vue2_test1_router进入文件夹内，再次使用npm install命令
【图4】
等待安装进度条走完，输入npm run serve运行后就可以查看vue2的欢迎界面了，网址是http://localhost:8080/
[图5]
接下来要开始进行路由配置，高版本的路由无法在vue2上面运行，会报错，所以直接安装路由的3.1.3版本命令如下
npm i vue-router@3.1.3 -S //旧版本
手快已经安装了高版本路由的同学也没关系，可以使用如下命令进行卸载，再安装就可以了
npm uninstall vue-router -S //卸载
【图6】
安装成功后就开始路由配置吧，并且开始做第一个路由案例，把项目中components文件夹下的HelloWorld.vue文件删除，清空App.vue原本写的内容倒也不用全删了，到下图这样就可以了
【图7】
在src文件夹下创建router文件夹，router文件夹下创建index.js文件，将下面的代码复制进去
import Vue from 'vue'
//对应你要跳转的组件
import Router from 'vue-router'
Vue.use(Router)
import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'
import ChildThree from '../components/childThree'
export default new Router({
routes: [
{
path: '/one',
name: 'ChildOne',
component: ChildOne,
children:[
{
path:'three',
component:ChildThree,
},
],
},
{
path: '/two',
name: 'ChildTwo',
component: ChildTwo
}
]
})
随后打开main.js文件，将下列代码复制进去，把原有的代码进行覆盖
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false
Vue.use(router)
new Vue({
el: '#app',
render: h => h(App),
router,
components: { App },
template: '<App/>'
}).$mount('#app')
然后在components文件夹下创建三个文件，
文件一，childOne.vue
<template>
<div style="border:1px solid red;color:red;">
<p>这是子组件1的内容</p>
<p>下面开始点击显示嵌套的子路由 </p>
<router-link to="/one/three">显示登录页面</router-link>
<router-link to="/one/reg">显示注册页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
【8】
文件二，childTwo.vue
<template>
<div style="border:1px solid blue;color:blue">
<p>这是子组件2的内容</p>
<p>这是第二个路由显示的页面怎么样</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
【9】
文件三，childThree.vue
<template>
<div style="border:1px solid blue;color:blue">
<p>这是子1的孩子内容</p>
<p>页面怎么样</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
【10】
到这里已经成功了90%，还差最后一步，再在components文件夹内创建TestRouter.vue文件
代码如下
<template>
<div id="app">
<!-- <div><img src=""></div> -->
<router-link to="/one">显示第一个页面</router-link>
<router-link to="/two">显示第二个页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
【11】
最后就是引入我们刚才写的那些了，打开app.vue文件，写下如下内容
<template>
<div id="app">
<TestRouter></TestRouter>
</div>
</template>
<script>
import TestRouter from './components/TestRouter'
export default {
name: 'App',
components: {
TestRouter
}
}
</script>
<style>
</style>
【12】
路由的部分已经写完了，可以试着运行一下，其中包括路由嵌套，接下来是Element UI的环境配置
打开命令行窗口，输入命令npm i element-ui -S，回车，等待安装
在main.js文件中写下如下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
【13】
这就已经导入完成了
开始写个案例测试一下，在components文件夹下创建TestElement.vue文件，写入如下代码：
<template>
<div>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
【14】
接下来在app.vue中补充三条代码就可以运行了
<TestElement></TestElement>
import TestElement from './components/TestElement'
TestElement（这里的上一行末尾加个逗号，不然报错）
【15】
网友评论