Fork me on GitHub

vue学习

发表于 | 更新于: | 分类于 ， ， |
| 字数统计: 2.2k

vue的简单学习，面向项目学习。包括了一些名词的解释学习和两个前端项目的学习。

vue入门

vue.js 的API文档

下载vue.min.js，使用script标签引入。

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。data 用于定义属性，methods 用于定义的函数，可以通过 return 来返回函数值。双花括号用于输出对象属性和函数返回值

使用 v-html 指令用于输出 html 代码

HTML 属性中的值应使用 v-bind 指令。

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

组件（Component）是 Vue.js 最强大的功能之一。

安装

cnpm install -g @vue/cli

node@10.15.3版本太低，不匹配vue@3.x的版本

升级node，

  1. 通过n模块

    npm install -g n报错，改为 npm i -g n --force，安装成功了，但是n命令不能使用。

  2. 通过nvm

    下载nvm，github太不稳定了，下载不了，感谢博主的百度云链接，然后参照文章进行安装，几个注意点：文件夹名不要出现 中文 和 空格；在运行nvm install 的时候，有可能会出现无权限安装的问题，如果遇到此问题，请 以管理员身份运行 cmd。

    node安装成功但是npm不能安装。有坑

    nvm安装后node生效但是npm不生效

    在nvm安装目录，找到 setting.txt用记事本打开添加如下两行：

    1
    2
    node_mirror: https://npm.taobao.org/mirrors/node/ 
    npm_mirror: https://npm.taobao.org/mirrors/npm/

手动去安装，下载地址，

  1. 自己下载node对应的npm版本
  2. 解压后将文件夹重命名为npm并复制到node_modules目录下

  3. 最后将npm中bin目录下的npm以及npm.cmd复制到与node_modules目录同级目录下

    完美解决。

    如何从Windows中删除Node.js：

​ C:\Program Files (x86)\Nodejs
​ C:\Program Files\Nodejs
​ C:\Users{User}\AppData\Roaming\npm（或%appdata%\npm）
​ C:\Users{User}\AppData\Roaming\npm-cache（或%appdata%\npm-cache）

1
2
3
4
5
6
7
8
9
nvm install 14.5.0 // 安装14.5.0版本node
   nvm install latest // 安装最新版本node
   
   nvm list // 显示已安装的版本（同 nvm list installed）
   nvm list installed // 显示已安装的版本
nvm list available // 显示所有可以下载的版本
   
nvm use 14.5.0 // 使用14.5.0版本node
   nvm uninstall 14.5.0 // 卸载14.5.0版本node

  1. 通过gnvm，方法二成功了，未尝试方法三

  2. nvm知识补充

idea创建vue项目（参考视频，参考博客

  1. npm@v8.3.1好像有bug，创建项目出错，npm ERR! Unexpected token '.'
  2. 更换版本，node@v14.16.0，npm@v6.14.1，成功创建

正式进入开发

开发

下载了一个开源模板，RuoYI-Vue，对应的说明文档手摸手，带你用vue撸后台，选择了基础模板==>vueAdmin-template（对应文档）。本篇前端用了element-ui

后续进行主页面定位的开发，参考开源的代码，博客GPS定位系统(四)——Vue前端，本篇前端用了ivew-admin，后台github地址GpsServer

项目1目录结构

router路径映射，通过地址可以访问界面。

components+views一些代码通过组件的方式打包，在别的界面进行引入。

搭建页面：使用element组件，参考mall项目，先搭后台管理页面。

在研读vue-admin-template项目代码前，有必要搞清楚vue项目结构关系。

而index.html中

1
<div id="app">来自index.html正文中的内容</div>

上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上；

main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过

告诉该实例要挂载的地方；（即实例装载到index.html中的位置）

参考文章1，文章2

项目2

建立数据库和修改连接池配置，虽然出了点小问题，但是意外的很快跑起来了。完美~接下来进行项目的学习，该项目很像我正在做的项目。

目录结构

观察路由表，地图相关的有：now-gps; gps-history可以参考。

store文件夹中user.js, 对user信息的增删改查，处理登录信息，处理轨迹信息。调用了util.js实现对user信息的操控。

瞎折腾项目gps添加swagger-ui莫名其妙的出问题，

  1. 先是添加版本号解决了插件找不到问题，
  2. swagger报错No handler found for GET /swagger-ui.html 按照博客的方法，添加映射之后，仍然有问题：com.jafir.springboot.exception.TokenException: null，懒得继续搞了，无意义。

element-ui

参考文档，适配vue2

element-plus参考文档，适配vue3

vuex

参考文档

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Axios

参考文档

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

mock

测试用，数据模拟生成器

webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

vue程序的调试

MARK

pro1

  1. Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大—–异步请求？
  2. JavaScript.trim() 方法用于删除字符串的头尾空白符.
  3. 在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
  4. 富文本

pro2

  1. vm.$emit( event, arg ) //触发当前实例上的事件，api文档

  2. .env.development（开发环境）、.env.prodction（正式环境）、自定义环境，参考博客，vue-cli官方文档

  3. 前端开发：npm run serve 和 npm run dev 的区别

    package.json文件中的’scripts’字段定义了怎么启动项目。

登录token处理

参考博客

通过设置 ajax 拦截器，将 token 放在header 中，使每次请求带上 token，在每次发送请求时，让后台先判断 token 是否合法，再进行下一步操作。

此处将token临时存储到cookie中。

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。

权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。
链接：https://juejin.cn/post/6844903478880370701

因为HTTP协议是无状态协议，一旦本次会话结束，客户端与服务器的连接就会关闭，下次需要重新建立连接，服务器就无法跟踪上次会话了。为了跟踪会话，需要使用Cookie

参考文档

ES6

无论是前端还是后台项目的编写都用到了ES6语法。参考文章

ES6是JavaScript语言的新一代标准，加入了一些新的功能和语法。

  1. ES6中可以使用 => 作为函数表达形式，极简风格，参数＋ => ＋函数体。

  2. ES6 推荐在函数中使用 let 定义变量

    const 用来声明一个常量，但也并非一成不变的

    let 和 const 只在最近的一个块中（花括号中）有效

  3. ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，直到状态为true退出。

  4. ES6还是有很多棒棒的语法，有利于精简代码，高效开发；只不过一些低级别浏览器不支持，可以用Babel等工具把ES6转化成ES5，但是有些语法还是不够完善

@TableId(value=”id”, type=IdType.AUTO) 设置id自增

mixin

类似面向对象的继承机制，定义一个基类，继承自基类，可以复用代码，参考文档



本文标题:vue学习

文章作者:tsuki

发布时间:2022.03.25 - 19:44

最后更新:2022.03.25 - 20:20

原始链接:https://tsuki419.github.io/vue.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------THE END-------------
0%