vue-clinpm install脚手架:  vue-loader    1.0  ->     new Vue({      el: '#app',      components:{App}    })        2.0->    new Vue({      el: '#app',      render: h => h(App)    })vue2.0     vue-loader和vue-router配合style-loader    css-loader    style!css

index.html

main.js

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import routerConfig from './router.config.js'import './assets/css/animate.css';import './assets/css/1.css';Vue.use(VueRouter);const router=new VueRouter(routerConfig);new Vue({  router,  el: '#app',  render: h => h(App)})

router.config.js

import Home from './components/Home.vue'import News from './components/News.vue'export default{    routes:[        {path:'/home', component:Home},        {path:'/news', component:News},        {path:'*', redirect:'/home'}    ]}

App.vue

New.vue

Home.vue

webpack.config.js

var path = require('path')var webpack = require('webpack')module.exports = {  entry: './src/main.js',  output: {    path: path.resolve(__dirname, './dist'),    publicPath: '/dist/',    filename: 'build.js'  },  module: {    rules: [      {        test: /\.vue$/,        loader: 'vue',        options: {          // vue-loader options go here        }      },      {        test: /\.js$/,        loader: 'babel',        exclude: /node_modules/      },      {        test: /\.css$/,        loader: 'style!css' //顺序定死的，否则不能loader Css,      },      {        test: /\.(png|jpg|gif|svg)$/,        loader: 'file',        options: {          name: '[name].[ext]?[hash]'        }      }    ]  },  resolve: {    alias: {      'vue$': 'vue/dist/vue'    }  },  devServer: {    historyApiFallback: true,    noInfo: true  },  devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') {  module.exports.devtool = '#source-map'  // http://vue-loader.vuejs.org/en/workflow/production.html  module.exports.plugins = (module.exports.plugins || []).concat([    new webpack.DefinePlugin({      'process.env': {        NODE_ENV: '"production"'      }    }),    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      }    }),    new webpack.LoaderOptionsPlugin({      minimize: true    })  ])}

package.json

{  "name": "vue-demo",  "description": "A Vue.js project",  "author": "strive 
     
      ",  "private": true,  "scripts": {    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --port 8085",    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"  },  "dependencies": {    "vue": "^2.0.1",    "vue-router": "^2.0.1"  },  "devDependencies": {    "animate.css": "^3.5.2",    "babel-core": "^6.0.0",    "babel-loader": "^6.0.0",    "babel-preset-es2015": "^6.0.0",    "cross-env": "^3.0.0",    "css-loader": "^0.25.0",    "file-loader": "^0.9.0",    "style-loader": "^0.13.1",    "vue-loader": "^9.7.0",    "webpack": "^2.1.0-beta.25",    "webpack-dev-server": "^2.1.0-beta.0"  }}