Vue学习（1）--创建和路由

一、创建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')

• 在浏览器中通过改变路由检查是否可以进行页面的转换