（三）快速上手VUE 单文件语法、组件、示例build生成并部署上线

1.模板语法介绍

<!-- 【html代码】 最多可以包含一个 -->
<template>
   <div>
   	"template"标签渲染出来是空的，因此内容部分需整体出现，需加一个div框起来。
   </div>
</template>
<!-- 【js代码】 最多可以包含一个 -->
<script>
	export default{
		data(){
			//必须是函数
			return {
				datalist:["aa","bb"],
				mytext:""
			}
		},
		methods:{
			handleClick(){
				this.datalist.push(this.mytext);
			}
		}
	}
</script>

<!-- 【css代码】 可以包含多个  -->
<style lang="css">
  /* style标签，css全局生效*/
</style>
<style lang="css" scoped>
  /* style标签，加上scoped属性，css局部生效*/
</style>
<style lang="scss" scoped>
  /* style标签，加上lang = "scss" ，支持scss */
</style>

【自动处理图片路径】 ./assets/logo.png。如图：

其中：style和scrtipt支持外部引用。

<!-- 【html代码】 最多可以包含一个 -->
<template>...</template>
<!-- 支持写法 <script src=""></script> -->
<script src="./assets/comm.js"></script> 
<!-- 支持写法 <style src=""></style> -->
<style src="./assets/comm.css"></style> 

2.子组件引用 - components

输入：App.vue 入口访问文件、main.js 调用入口文件、mychild.vue 子组件文件。

App.vue 入口访问文件：

<template>
  <div id="app">
    
    <h1>Hello world</h1>

    <mychild></mychild> <!--html部分，子组件引入-->

  </div>
</template>

<script>
    /* js部分，子组件引入 */
    import mychild from "./mychild";
    export default {
      data(){
        return {}
      },
     /* js部分，子组件引入 */
      components:{
        mychild /*ES6 的简写，当组件名和引用文件名一直的时候*/
        /* 
        正常写法
        mychild:mychild
        */
      }
    }
</script>

<style lang="css" scoped>
#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>

main.js 调用入口文件：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Tips：Vue.config.productionTip = false ，这个家伙是屏蔽加载的时候在console控制台输出的vue的官方log说明。
当设置为 true 时，如图：

当设置为 false 时，如图：

mychild.vue 子组件文件：

<template>
   <div>
     我是子组件！
   </div>
</template>
<script>
	export default{		
	}
</script>
<style lang="css" scoped></style>

输出：

vue安装和使用scss

安装sass-loader，其中它还需要node-sass的支持，所以一起安装。没安装cnpm的回上文回顾。传送门→

cnpm install node-sass sass-loader -D

安装过程：


支持！

3.build成浏览器认识的html

承接上文示例，我们发布它。发布过程将把 src 文件夹文件，打包生成到 dist 文件。

启用git在atui-webpack下面，执行 npm run build

稍等一会后…
发现dist目标下面就生成了 index.html和一个文件夹，最后一句英文说的是：这个生成的文件没有放到服务器上，需要用http://的方式去访问，就可以运行了，现在是file本地文件的形式，不可以工作。

4.部署上线

这时候，我就用ftp放到阿里云买的虚拟空间上：

完成：
PS:它很安全，当右键查看源码的时候,只有div id=“app”，和一堆 js。说明页面全靠js渲染。

总上所述，通过本文总结出三点心得：
1、通过学习 .vue 文件的语法规则，用法支持。满足页面设计的需求。

2、通过组件的学习，了解到把 vue 的思想放在大型项目中，单文件约等于单模块的概念，即可相互独立，又可相互组合，css样式又可在单文件中支持到全局。

3、示例生成为浏览器可识别的文件，并且文件是打包压缩过的，部署到服务器上，右键查看源码 和 右键审查元素可知，dome元素全靠js渲染，前端代码好安全，你懂的。

后续，会更新vue路由的学习笔记与心得。