[TOC] # npm run build 命令 如何把寫好的Vue網頁放到服務器上，主要的命令就是要用到npm run build 命令。我們在命令行中輸入npm run build命令后，vue-cli會自動進行項目發布打包。你在package.json文件的scripts字段中可以看出，你執行的npm run build命令就相對執行的 node build/build.js package.json的scripts 字段： ~~~ "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }, ~~~ 在執行完npm run build命令后，在你的項目根目錄生成了dist文件夾，這個文件夾里邊就是我們要傳到服務器上的文件。 dist文件夾下目錄包括： * index.html 主頁文件:因為我們開發的是單頁web應用，所以說一般只有一個html文件。 * static 靜態資源文件夾：里邊js、CSS和一些圖片 # main.js文件解讀 main.js是整個項目的入口文件,在src文件夾下 ~~~ import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false //生產環境提示，這里設置成了false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } }) ~~~ 通過代碼可以看出這里引進了App的組件和<App/>的模板，它是通過` import App from ‘./App’`這句代碼引入的。 我們找到App.vue文件，打開查看 # 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> ~~~ app.vue文件我們可以分成三部分解讀， * `<template></template>`標簽包裹的內容：這是模板的HTMLDom結構，里邊引入了一張圖片和<router-view></router-view>標簽，<router-view>標簽說明使用了路由機制。我們會在以后專門拿出一篇文章講Vue-router。 * `<script></script>`標簽包括的js內容：你可以在這里些一些頁面的動態效果和Vue的邏輯代碼。 * `<style></style>`標簽包裹的css內容：這里就是你平時寫的CSS樣式，對頁面樣子進行裝飾用的，需要特別說明的是你可以用`<style scoped></style>`來聲明這些css樣式只在本模板中起作用 # `router/index.js` 路由文件 引文在app.vue中我們看到了路由文件，雖然router的內容比較多，但是我們先簡單的看一下。下篇文章我們就開始講Vue-router。 ~~~ 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 } ] }) ~~~ 我們可以看到` import Hello from ‘@/components/Hello’`這句話， 文件引入了`/components/Hello.vue`文件。這個文件里就配置了一個路由，就是當我們訪問網站時給我們顯示Hello.vue的內容