一、创建vue项目
vue中使用的是组件的思维构成我们的应用,所有在处理页面的时候最好将页面也作为组件来进行处理。
1.更改npm yarn的镜像
//查看registry
npm config list
yarn config list
//更改registry
npm config set registry https://registry.npmmirror.com/
yarn config set registry https://registry.npmmirror.com/
2.创建项目
vue create <your project>
建议选择vue2项目
二 使用vue-router实现路由映射
即改变路径即可展示不同的页面,详细过程:
vue2中路由的添加,配置和使用
- 安装vue-router
npm i vue-router@3.6.5 -S
- 创建一个view文件,在view文件中创建单页组件,这些单页组件页面通过路由映射
//这是Home.vue页面
<template>
<div>
这是Home
</div>
</template>
<script>
export default {
data(){
return
}
}
</script>
//这是User.vue页面
<template>
<div>
这是User
</div>
</template>
<script>
export default {
data(){
return
}
}
</script>
- 创建路由模块,在文件中创建index.js文件,在该文件中完成组件映射
import Vue from 'vue'
import VueRouter from 'vue-router'
//从其他文件中导入组件
import Home from './Home.vue'
import User form './User.vue'
Vue.use(VueRouter) //全局注入
//1. 创建组件
//2. 定义组件的路由映射
const routes = [
{path:'/home',component:Home},
{path:'/user',component:User}
]
//3. 创建router实例
const router = new VueRouter({
routes
})
//4. 使用router实例,将router抛出
export default router
- 在main.js中引入路由模块,在Vue实例中添加该router,从而让整个应用都知道该路由功能
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
//引入路由模块
import router from './router'
//通过全局方法 Vue.use() 使用插件
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
- 在浏览器中通过改变路由检查是否可以进行页面的转换