目錄創建好之后，命令行輸入
npm run dev
因為在配置文件config/index.js里：
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false }
webpack會默認創建本地服務器監聽8080端口，autoOpenBrowser為true，瀏覽器會自動打開，我一般會關掉，因為以后調試會運行很多次 npm run dev；
然后打開
下面看下幾個主要的文件：
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
index里面只有一個id為app的div，因為webpack會自動將js，css添加進去；
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
這個文件，首先將vue，App（引入的component），router（配置路由）；
創建Vue實例然后將App組件以<App><App/>的方式放入index里id為app的元素里；
然后是App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
對vue組件不熟的可以去看官方文檔，真的很詳細；
在template中引入了 <router-view></router-view> 這代表路由，我們可以看下路由的配置；
router.js
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] })
這個官方文檔講得也很清楚，path寫的是路徑，這個文件的意思是當路徑是"/"(即當前頁面)時，引入組件Hello.vue;
對應App.vue就是打開首頁的同時要引入Hello.vue；
當然在真正的項目中會有多個路由，只要在routes中多加介個配置就行了；
下面是我在項目中的router.js文件，注：引入組件文件的時候，一定要注冊組件
import Vue from 'vue' import Router from 'vue-router' import goods from '../components/goods/goods' import seller from '../components/seller/seller' import ratings from '../components/ratings/ratings' Vue.use(Router) export default new Router({ linkActiveClass:'active', routes: [ { path: '/goods', component: goods }, { path: '/seller', component: seller }, { path: '/ratings', component: ratings }, { path: '/', component: goods }, ] })
linkActiveClasss:當路由切換到當頁時會自動給頂層元素分配一個class屬性，可以去自定義它,如下：
另外webpack最大的優點之一就是他的熱加載：當你修改文件后（除配置文件），webpack會自動編譯，並刷新頁面
如果出現錯誤會在上面顯示，如果正常會顯示如下：
