Vue应用

Vue项目

1. npm/cnpm install vue-cli
    1. 全局安装Vue脚手架工具，用于构建Vue项目，输入"vue"命令可检查是否成功
2. vue init webpack vue_demo ==> 构建一个Vue项目
    1. webpack：模板名称； vue_demo：项目名称，不能包含大写字母；
3. cd vue_demo --> npm/cnpm install --> 初始化：下载模板等
4. npm/cnpm run dev --> 打包运行：http://localhost:8080/
    1. "dev"在项目的package.json中的"scripts"下，表示开发环境运行；

Vue结构

1. build：webpack相关的配置文件
    1. dev表示开发环境，prod表示生产环境；
2. config：webpack相关的配置文件
    1. index.js：指定后台服务的host、port、静态资源文件夹
3. static：存放全局的资源，如CSS、图片等；
    1. .gitkeep：为git服务，当static文件夹为空时，不忽略此文件夹；
4. src/main.js：入口文件； src/App.vue：根组件； src/components：子组件目录；
5. index.html：Vue最终的应用都是单页面的，组件最终打包到index.html中；

Vue项目打包与发布

1. 静态Web服务器发布
    1. npm/cnpm run build --> 打包项目，默认生成disk目录，也就是可发布的应用
    2. npm/cnpm install -g serve --> 全局安装一个静态服务器工具包
    3. serve dist --> 运行可发布的应用
2. 动态Web服务器发布
    1. 修改配置：webpack.prod.conf.js
    output: {
        publicPath: '/xxx/' --> 打包文件夹的名称,也即是项目名
    }
    2. npm/cnpm run build --> 重新打包项目
    3. 修改disk文件夹为项目名称xxx，将该目录拷贝到运行tomcat的webapps目录下。

Vue语法二

1. main.js：入口文件，用于初始化Vue实例，引入根组件、路由、公共资源(如base.css)
    1. 引入Vue和根组件：import Vue from 'vue'，import App from './App.vue'
    2. 引入base.css：import '../static/css/base.css'
    也可以在index.html中引入：
        
    3. 初始化基本的Vue实例：
    new Vue({
      el: '#app', --> app即是index.html中
的id属性值；
      components: { App },  --> 映射Vue组件，完整映射：{ 'App': App }
      template: '', --> 在模板中使用映射后组件
    })
2. App.vue：根组件，用于引入其他子组件、定义公共的数组、协调子组件间的通信...
    1. 组件的结构：