vue-router-dome使用webpack 打包过程

vue-router做的 饿了不 webpack 打包过程

1. 安装淘宝镜像cnpm 输入命令npm install -g cnpm

2. 安装脚手架 cnpm install -g vue-cli

3. 安装webpack-simple模板 并创建一个demo01的文件夹vue init webapck-simple demo01

4. 进入demo01文件cd demo01

5. 下载webpack-simple的依赖cnpm install

6. 开启虚拟服务器cnpm run dev开启成功后自动打开浏览器弹出绿色大V就对了

7. 然后按crtl+c关闭服务器，输入下载vue路由命令cnpm install vue-router -S

8. 在scr里新建components文件是用来存放组件的文件。在components文件里新建5个组件文件:

   • main1.vue

   • main2.vue

   • main3.vue

   • main4.vue

   • main5.vue

9. 一个.vue文件代表一个一个组件。一个组件代表一个页面

• 首先修改第一个组件里的内容，把main1.vue里的改成如下代码：

• main2.vue里改成如下：

• main3.vue里改成如下：

• main4.vue里改成如下：

• main5.vue里改成如下：

10. 这样就算把components里的组件修改完成了。然后就是想办法怎么让他显示在页面上。
    首先需要在index.html里写：

因为我尽量减少把代码的复制粘贴，所以就把js和css写在index.html里了。如需外引请自便，

• 然后我们修改src=>App.vue里的内容：

• 然后修改src=> mian.js里的内容：

import Vue from 'vue'
import vueRouter from "vue-router"
import App from './App.vue'
//银排至路由
import routerConfig from "./router.config.js"



Vue.use(vueRouter)
//用vueRouter//暴露
const myRouter=new vueRouter(routerConfig)
new Vue({
  el: '#app',
  render: h => h(App),
    router:myRouter
})

• 然后在src里新建一个配置路由的文件，文件名就取router.config.js吧 修改为：

//配置路由
import Main1 from "./components/main1.vue"
import Main2 from "./components/main2.vue"
import Main3 from "./components/main3.vue"
import Main4 from "./components/main4.vue"
import Main5 from "./components/main5.vue"

export default{
    // 暴露文件
routes:[
    {path:"/main1",component:Main1},
    {path:"/main2",component:Main2},
    {name:"game1",path:"/main3",component:Main3},
    {name:"game2",path:"/main4",component:Main4},
    {name:"game3",path:"/main5",component:Main5},
    {path:"/",component:Main1}
]
}

• 最后你应该吧main2.vue里的文件所用的图片放上去，放到src=>assets文件里：

  
  
  

  image.png

当然图片不重要。路径和名字一样就行

• 然后执行cnpm run dev就OK了
• 最后一步， 把dist文件编译出来。不编译出来的话只能在服务器看到的。编译出来可直接打开。
• 下载webpack ···cnpm install webpack -g···
• 执行webpack
• 发现目录中多了一个dist文件就对了。
• 然后把index.html里的倒数第三行
  
  改为
  
  就OK了。关掉git bash
  直接打开index.html 就可以看到了