一、VUE生命周期

VUE实例化将经过创建、编译和销毁三个主要阶段

一、VUE项目结构：

|-- build        // 项目构建(webpack)相关代码
| |-- build.js         // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- logo.png         // logo图片
| |-- utils.js         // 构建工具相关
| |-- vue-loader.conf.js    // vue-loader配置
| |-- webpack.base.conf.js  // webpack基础配置
| |-- webpack.dev.conf.js   // webpack开发环境配置
| |-- webpack.prod.conf.js  // webpack生产环境配置
|-- config      // 项目开发环境配置
| |-- dev.env.js     // 开发环境配置
| |-- index.js       // 项目主要配置(包括监听端口，打包路径等)
| |-- prod.env.js    // 生产环境配置
|-- src         // 源码目录
| |-- assets       // 静态资源
| |-- components   // vue公共组件
| |-- router       // vue路由
| |-- App.vue      // 页面入口文件
| |-- main.js      // 程序入口文件，加载各种公共组件
|-- static     // 静态文件，比如一些图片，json数据等
| |-- data       // 群聊分析得到的数据用于数据可视化
|-- .babelrc       // ES6语法编译配置
|-- .editorconfig  // 定义代码格式
|-- .gitignore     // git上传需要忽略的文件格式
|-- .postcssrc.js  // post-loader的插件配置文件
|-- index.html     // 入口页面
|-- package.json   // 项目基本信息
|-- package-lock.json    // 锁定当前安装的包的依赖
|-- README.md      // 项目说明

1.build——[webpack配置]

build文件主要是webpack的配置，主要启动文件是webpack.dev.conf.js，当我们输入npm run dev首先启动的就是webpack.dev.conf.js，它会去检查node及npm版本，加载配置文件，启动服务。

2.config——[vue项目配置]

config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

3.node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖：

（1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）

（2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）

注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4

4.src——[项目核心文件]

项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js和router

main.js——[入口文件] 
主要是引入vue框架，根组件及路由设置，并且定义vue实例，

下图中的components:{App}就是引入的根组件App.vue 

后期还可以引入插件，当然首先得安装插件。 

router——[路由配置] 
router文件夹下，有一个index.js，即为路由配置文件

这里定义了路径为'/'的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件

类似的，我们可以设置多个路由，‘/index','/list'之类的，当然首先得引入该组件，再为该组件设置路由。 

====================================
1、接口SpringMVC，死活取不到前端提交来的数据

最终成功的方式

JSON.stringify(formData) 不行

let 和const使用

JavaScript中通常使用的var定义变量，会发生变量提升，即，脚本开始运行时变量已经存在了。但是没有赋值，为undefined；
let 不会发生变量提升，在声明之前变量是不存在的，这时如果使用会报错；
let是块级作用域；var是函数级作用域
let不允许在相同作用域内重复声明

const 声明一个只读常量，（对于复合类型数据，变量名不指向数据，而是指向地址）
https://www.cnblogs.com/zhihaospace/p/6242573.html
=============================================================

坑二 通过vue做前后端分离，跨域session问题

描述，系统登录获取验证码，验证码是在后端写到session中的，后面登录再次请求，无法通过session获取验证码。
调试发现，每次请求sessionId不一样，也就是说每次都是新的session

查了下网上解决方案，挺多 也很复杂，晕头转向，都没好使。。。。
我的前端，axios 在main.js中加了一句解决问题

axios.defaults.withCredentials = true

后端

<mvc:cors>
    <!--<mvc:mapping path="/api/**" allowed-origins="http://localhost, http://dispace.net"
                 allowed-methods="GET, PUT"
                 allowed-headers="header1, header2, header3"
                 exposed-headers="header1, header2" allow-credentials="false"
                 max-age="3600" />-->
    <!--<mvc:mapping path="/api/**" allowed-origins="http://localhost:8086" />-->
    <mvc:mapping path="/api/**" allowed-origins="*" />
</mvc:cors>

原因就是：axios，withCredentials默认是false，意思就是不携带cookie信息
==========================================================
localStorage和sessionStorage区别
都是用来存储客户端临时信息的对象；都只能存储字串类型对象；不同浏览器都无法共享localStorage或sessionStorage中的数据；
不同：
localStorage只要用户不手动清除，会永远存在，生命周期是永久的；sessionStorage关闭标签或窗口丢失
同浏览器localStorage可以共享数据，sessionStorage不同页面或标签无法共享


==========================================================

},
computed: { // 就是 实时计算 使用。Vue检测到数据发生变动时就会执行对相应数据有引用的函数
  ...mapGetters([ // 3个点内容转换成数组；
    'copyright',
    'recordNumber',
    'userInfo',
    'showQQGroup',
    'thirdPartySite'
  ]),
/***
 *  mapGetters([  这种写法等价于  mapGetters([
 *    'copyright',                  copyright:'copyright', //映射this.copyright为store.getters.copyright
 *     ...
 *  ])
 */
  isBlog () {

==========================================================

1. computed是在HTML DOM加载后马上执行的，

2. 如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；

3. watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

==========================================================
vue 引入第三方js
https://blog.csdn.net/csdn_yudong/article/details/78795743
==========================================================