Vue-cli 模板解读

npm run build 命令

在命令行中输入npm run build命令后，vue-cli会自动进行项目发布打包。

在package.json文件的scripts字段中可以看出，执行的npm run build命令就相对执行的 node build/build.js 。

package.json的scripts 字段：

执行完npm run build命令后，在项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。

dist文件夹下目录包括：

index.html主页文件:因为我们开发的是单页web应用，所以说一般只有一个html文件。

static 静态资源文件夹：里边js、CSS和一些图片。

main.js文件解读

main.js是整个项目的入口文件,在src文件夹下：

通过代码可以看出这里引进了App的组件和的模板，它是通过 import App from ‘./App’这句代码引入的

App.vue文件:

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中我们看到了路由文件

可以看到 import Hello from ‘@/components/Hello’这里引入了/components/Hello.vue文件。

这个文件里就配置了一个路由，就是当我们访问网站时给我们显示Hello.vue的内容。

Hello.vue文件解读：

Hello.vue文件分为<template><script><style>三个部分，大部分的工作都是写在这些.vue结尾的文件。

可以试着改一些内容，然后预览一下。浏览器会进行热更新

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <ul>

      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>

      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>

      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>

      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>

      <br>

      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>

      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>

      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>

      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>

    </ul>

  </div>

</template>

<script>

export default {

  name: 'hello',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>