三十一、解读Vue-cli模板

                           解读Vue-cli模板

1、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和一些图片。

2、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: '',
  components: { App }
})

        通过代码可以看出这里引进了App的组件和的模板，它是通过 import App from ‘./App’这句代码引入的。 我们找到App.vue文件，打开查看：

App.vue文件:

app.vue文件我们可以分成三部分解读，

标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和标签，标签说明使用了路由机制。
 
标签包括的js内容：你可以在这里些一些页面的动态效果和Vue的逻辑代码。

标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，需要特别说明的是你可以用来声明这些css样式只在本模板中起作用。

3、router/index.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
    }
  ]
})

        我们可以看到 import Hello from ‘@/components/Hello’这句话， 文件引入了/components/Hello.vue文件。这个文件里就配置了一个路由，就是当我们访问网站时给我们显示Hello.vue的内容。

4、Hello.vue文件解读