[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的内容