前端项目初识

前台vue项目前介

一、 运行环境：

   node：10.13.0
   webpack：打包

二、工程使用的

1. vue-cli link
2. less link
3. axios link
4. vue生态圈 (iview link、vuex link、vue-route link)
5. es6语法 link

三、初步

3.1 es6用法

1. 变量声明：let a = ‘sss’;

     与java不同，js中的变量都是弱类型。

2. 箭头函数，可以类比于java的lambda函数。（只做类别，不做语言的优越性）

    ```
    Let a = (aaa) => {console.log('comstar')};
    ```
    注意：箭头函数与传统的function函数this指代的区别，在项目有些是用function，有的用箭头函数。
    箭头函数中的this：代表父级的对象。
    function函数中的this: 可能代表window等。在项目中组件的method的方法只能用function，其中的this是经过处理的，代表vue。

3.模板语法和分隔符

let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!

4.for…of VS for…in

for…of 用于遍历一个迭代器，如数组：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
// 结果: di, boo, punkeye

for…in 用来遍历对象中的属性：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

3.2 vue思维

jQuery

以前的jQuery 是使用代码手动操作DOM的思维，会有一堆繁琐的插入页面和获取页面操作代码。

vue

vue是通过数据驱动，就是将数据绑定到对应的DOM上。数据变化随之页面变化，页面上变化数据也变化。其中的对DOM操作是由vue框架的提供的。这就是mvvm（Model-View-ViewModel）思维。

java与vue

以前讨论过MVVM和java思维的不同： java的动作都是通过每个对象的方法执行。前端MVVM是每个动作都是数据操作，数据变化对应页面动作变化。
（只做对比，没有技术的鄙视链，每项技术都是一段过程的产物）
<vue使用简单案例>

node、npm使用

node下载安装link
npm 简单命令

npm init   // 初始化
npm install  // 根据package.json文件进行安装依赖模块
npm run dev // 项目启动
npm bulid // 项目打包

4.前端项目介绍

4.1 前端工程目录

babel说明：本身node对es6,不是全部支持。这样就用到了webpack的babel在编译或打包时，将es6语法转为es5语法。这就是为什么项目中用到了exports / require 和 export / import。
exports / require 是commonJS中的node支持，export / import是后出来的，es6支持，在功能上要强点。两者的区别 link

4.2 项目使用目录

css样式编写

项目中使用的less，其实与css差不多，多了变量的概念，可以一处定义，到处使用。

1. 全局样式
   主要编写在index.less，原因是index.less被加载到了main.js.
2. 组件样式
   方法一：样式不多，写在对应的组件中
   方法二：样式多，写在单个文件，然后引入对应的组件，这样就不会干扰到其他组件。
   注意： 尽量少用!importment属性。也尽量减少在HTML中加入style。

5. vue和springboot项目打包

5.1 将vue打包进springboot工程下的resource/static下。

1.项目在vue.config.js中加入outputDir，指定vue打包生成路径指向resource/static。

outputDir: '../backend/src/main/resources/static',

2.修改springboot项目静态资源路径和默认加载页面

3.加入filter，使得springboot不拦截vue的路由

到此就可以在springboot上启动项目，那么项目打包就是原来的springboot的打包方式。

5.2使用前后端分离打包，前台使用nginx，后台还是原来的。