第3节：解读Vue-cli的模板

我们通过两节课的讲解，你对vue-cli应该有了基本的了解，这节我们主要了解一下Vue-cli的模板操作，包括增加模板，修改模板，以及一个常规模板的基本结构。

一、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 字段：

 

 

1 2 3 4

"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文件夹下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13

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文件:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<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。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

五、Hello.vue文件解读：

这个文件就是我们在第一节课看到的页面文件了。也是分为<template><script><style>三个部分，以后我们大部分的工作都是写这些.vue结尾的文件。现在我们可以试着改一些内容，然后预览一下。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<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>

 

总结：

这个教程只是带着你大概浏览和重点讲解了vue-cli的知识，如果你想完全弄明白vue-cli，我建议最好是有调理的阅读所有代码，这对你以后成为vue实际项目 的开发很有帮助。如果你是一个初学者，了解这些已经足够向下学习了。这篇教程结束后，我们会学习vue-router的知识，vue-router是一个重点学习任务，我会竭尽所能把路由的知识都讲透。很高兴大家能和我一起学习，我们下篇教程见了。

转载于:https://www.cnblogs.com/jinsuo/p/8298267.html