vue知识

vue：渐进式 ：可插拔式 可扩展
JavaScript 框架

vue：核心 ->a->b-》C

引入vue库：js引入

前端开发工具：
HBuider WebStorm VSCode
xx.vue文件组成结构：

html模拟vue知识：

在chrome中安装vue开发工具：
https://www.cnblogs.com/alice-fee/p/8038367.html

computed中定义的data变量（类似方法的形式）只会被计算一次，之后会加入缓存中

class=“xxx” ->

vue:

// 注入组件选项 .每次实例vue对象中调用一次
Vue.mixin({
created: function () {
// 逻辑…
alert(‘mixin’);
}
})

脚手架： 模板 /客户端
npm install -g vue-cli
下载模板
vue init webpack my_vue_cli 根据提示 安装附加组件， 安装时 输入项目名时 不能包含大写字母。安装时，不要随意点鼠标
根据提示 cd 目录
npm run dev

访问 http://localhost:8080

java ->class

vue - >dist最终运行的目录：打包 npm run buid
web项目 -》war

运行（静态服务）：
1.打包npm run buid ->dist
2.服务组件(静态服务)：
npm install -g serve
3.serve dist

动态服务器：tomcat

1.配置webpack.prod.conf.js
output: {
…
publicPath: ‘/myvue/’ -->配置访问时的项目名

2.打包成dist
3.将dist拷贝到tomcat/webapps中，并且再将dist修改成myvue
4.启动tomcat,运行

vue cli源码解读：
npm run dev 触发了哪些文件？
1.
dev ->package.json ->build/webpack.dev.conf.js ->./webpack.base.conf
->./src/main.js引用时的名字叫app

2.根据web基础知识可知：
http://localhost:8080 实际是访问http://localhost:8080/index.html
index.html:

->会被src/App.vue中的

内容注入：

：路由，映射关系 localhost:8080/b -> xxx
本项目的映射： localhost:8080/ -》HelloWorld.vue

: router/index.js

@RequestMapping(/a)
public void a()
{
…
}

npm run dev -> main.js
localhost:8080 / :index -> router -> HelloWorld.vue中的内容

ESlint：代码规范检查工具
空格个数
空行
变量名
代码是否未被使用
…
https://cn.eslint.org/docs/rules/
如果不规范，则警告 或报错

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
设置某些检查规则：
.eslintrc.js
全局设置是否启用eslint：（其中配置的文件，会忽略eslint检查）
/build/
/config/
/dist/
/*.js
*.vue
*.js
*.html

初学：关闭
真实的开发项目：打开，帮助规范代码的编写

vue: