vue2.0入门及实战开发(五)

项目路由
前端路由：核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
ui-router：锚点值改变，如何获取模版？ajax
vue中，模版数据不是通过ajax请求来，而是调用函数获取模版内容

核心：锚点值改变
以后看到vue开头，就必须知道Vue.use
Vue-router(路由),Vuex(管理全局共享数据)

使用方式
1：下载  npm i vue-router -S
2: 引入，在main.js中引入   import VueRouter from 'vue-router'
3：安装插件 Vue.use(插件)    Vue.use(VueRouter)
4：需要配置路由规则，需要个路由对象
let router=new VueRouter({routes:[path:'/home',component:Home} ] });

5：将其路由对象传递给Vue的实例，options中   router : router

6：留坑   <router-view></ruoter-view>

//引入一堆
import Vue from 'vue'
import VueRouter from 'vue-router'

//主体
import App from './components/app.vue'  
import Home from './components/home.vue'

//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router=new VueRouter({
    routes:[
    //一个个对象
    {path:'/',component:Home}
    ]
})

//new Vue启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router:router, //可以简写成router
    render:c=>c(App);
})




错误整理
1：Module not found:Error:Can't resolve 'vue-router'
可能是因为没安装好，

2：Uncaught Error:Cannot find module "vue-router"
没有装载vue-router, Vue.use(vue-router)  或者 npm i vue-router -S

3：Module not found:Error:Can`t resolve 'less-loader' 
在子组件中的样式里加了代码
<style lang="less" scoped>

</style>
而这个less是需要安装的，npm install --save-dev less-loader less
https://www.npmjs.com/package/less-loader
所以不想安装的话可以直接删掉，若要用就要安装，否则就报错

4：webpack后，出现htmlWebpackPlugin is not defined
说明没有声明htmlWebpackPlugin对象
const htmlWebpackPlugin=requrie('html-webpack-plugin')

5：Error：missing script: dev
在package.json中没有这个命令，加入就好


重点：没有留坑和规则不匹配，当没显示的时候可能的原因


基于webpack编译，就要打包