VUE项目搭建（二）

Webpack

webpack是项目自动化工具
webpack.config.js是webpack配置文件

entry:'./src/main.js',
output: {
    path: path.resolve(__dirname,'./dist'),
    publicPath:'/dist/',
    filename:'build.js'
}

entry：指定了程序的入口文件，告诉webpack源文件在哪里。
output:指定了程序的输出文件，告诉webpack把文件解析后，放到哪里，以及名字叫什么

module : {
    rules: [
        {
            test:/\.vue$/,
            oader:'vue-loader',
            options: {// vue-loader options go here}
        },
        {
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules/
        },
        ...
    ]
}

插件集对 test匹配的文件做批处理
include 表示需要插件处理的目录
exclude 表示不需要插件处理的目录

vue-router

npm isntall vue-router --save-dev
安装vue-router

Vue.js 添加链接

   

       

            Home
            About
            Hello
       

   

   

       

             

                 
             

       

   

在src文件目录下创建route.js

import Vue from 'vue'
import VueRouter from "vue-router"
import Hello from './component/Hello.vue'
import Home from './component/Home.vue'
import About from './component/About.vue'
Vue.use(VueRouter)
const routes = [
{
  path: '/Hello',
  component: Hello
},{
  path: '/Home',
  component: Home
},{
  path: '/About',
  component: About
}];
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})
export default router

main.js引入route.js

import Vue from 'vue'
import router from './route'
new Vue({
    el: '#app',
    router,
    render: h => h(App),
})

创建Hello.vue,About.vue,Home.vue

运行vue-route起效