后台人员使用VUE入门

小灰灰 2023-02-14 07:44 17阅读 0赞

很久没有写web，最近写一个简单的DEMO，后台使用python，简单的总结下：

# 1、组件选择 #

VUE+ELEMENT-UI，组件用ELEMENT-UI基本沟通

## 1.1 概念区分 ##

**老的js程序员要分清概念：**

JavaScript,nodejs和reactjs以及react,react native是什么关系？可参考

[https://www.zhihu.com/question/47244505/answer/105026648][https_www.zhihu.com_question_47244505_answer_105026648]

**简单说：**

**a)nodejs是为了js后端化，使js程序员可以开发后端，其他的都是基于js做的view层的框架，你可以想象成node.js等同于java，等于jvm+jdk，然后是绑定处理的方式不一样。现在的情况是大多数构建view层的技术应用都使用node,js来进行包管理，打包**

**b)node.js是个解释环境，可以直接用下js语句，这这里练习js非常好**

**c)新的js标准交和ECMAScript关系，ECMAScript各个标准就是js标准，因为javascript是oracle的商标，不能用，换了个名称而已**

**d)typescript是更严格的javascript，主要是方便后端程序员使用更严格，最终会编译成js供调用，可以对比为一个java上的shell，不同的是java是强类型，shell为弱类型，在javascript正好相反**

**e)View层的框架又提出了许多新的概念，比如虚拟dom，主要是方便编程抽象**

## 1.2 设计原则 ##

js view层的框架有二个原则：是一个framework，还是一个library，还是二者兼有

Vue本身还是一个library，加了一些其他的工具，可以被当成一个framework。ReactJS也是library，同样道理，配合工具也可以成为一个framework。AngularJS（特指Angular 1）是一个framework，而Angular 2虽然还是一个framework，但其实在设计之初，Angular 2的团队站在了更高的角度，希望做一个platform。

# 2、编辑工具： #

vscode，使用的vue插件用的vetur，基本上够用。键盘布局对用老的Eclipse用户来说，装个Eclipse keyMap不错。emmm，虽然在用idea的全家桶，但是还是习惯Eclipse的快捷键

# 3、调试 #

vue中传统的调试仍然可以：最老的就是alert了，新的有**console，还有**vue devtool，debugger，其他更加复杂的方式没用过，更详细文档可见：

[https://blog.csdn.net/Jesse\_Mx/article/details/88621950][https_blog.csdn.net_Jesse_Mx_article_details_88621950]

[https://www.jianshu.com/p/c091cef64fa5][https_www.jianshu.com_p_c091cef64fa5]

设置好debugger后在chrome中非常好用啊

# 3、后端选择 #

python中选择就是：flask、tornado、django，轻便快还是flask、tornado。django很成熟，做个简单的项目的话觉得没那么必要

前端基础还是js，css，html都基于div了，核心为js。js中主要的还是事件、面向对象、闭包。以前曾经觉得特别困难的东西，在新的框架中都处理的还不错。

chrome中的插件真强大，想想IE5和IE6的时候，觉得做前端开发真不是人干的活，没啥工具，非常辛苦，后来firefox有了个简单的调试工具，如今的变化真大。

# 4、参考文档 #

**黑体的非常重要，主要是js和dom基础有新的标准，其他的还好**

## 4.1 vue相关 ##

vue的组件路由  
router-view使用$route.path来进行的跳转  
export interface 只是对一个东西的声明（不能具体的操作）  
export class 导出一个类 类里面可有有参数 可以有一写函数 方法（干一些具体的事情）

Vue的组件为什么要export default  
https://www.cnblogs.com/win-and-coffee/p/10186649.html  
export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字

Vue.nextTick 的原理和用途  
https://segmentfault.com/a/1190000012861862   
Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

vue中的computed和watch  
https://segmentfault.com/a/1190000012948175?utm\_source=tag-newest  
VUE的事件监听处理： https://www.cnblogs.com/mrsdong/p/12144375.html

## 4.2 javaScript ##

**MDN标准(强烈推荐）：**  
https://developer.mozilla.org/zh-CN/

帮你彻底搞懂JS中的prototype、\_\_proto\_\_与constructor  
https://blog.csdn.net/cc18868876837/article/details/81211729

**ES6 入门教程**  
https://es6.ruanyifeng.com/?search=import&x=0&y=0

**javaScript 运行机制详解：再谈Event Loop   **  
 http://www.ruanyifeng.com/blog/2014/10/event-loop.html  
**axios链式处理：**  
https://blog.csdn.net/weixin\_39703839/article/details/102839078  
https://blog.csdn.net/weixin\_42448623/article/details/104773280?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu\_weight&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu\_weight

axios封装XMLHttpRequest  
https://segmentfault.com/a/1190000021944305

js中难点的说明：  
https://blog.csdn.net/cc18868876837/article/details/96303296

##    4.3 node.js ##

node解释js文件：  
https://www.jianshu.com/p/802cdf66bebb  
node 文件名； 或者直接进入编辑模式

Node.js 在命令行下执行Console.log()命令时，第二行会打印undefined的原因  
https://blog.csdn.net/chy555chy/article/details/52332752  
https://stackoverflow.com/questions/9784865/node-js-console-log-throws-me-undefined

纯前端开发眼里nodejs到底是什么？    
https://www.zhihu.com/question/279322623/answer/406073443  
Node.js 是前端工程化的重要支柱之一

如何在node下运行typescript  
https://www.itranslater.com/qa/details/2325720335846474752  
开源项目支持：  
https://github.com/TypeStrong/ts-node  
在ts中，接口是一种约定，通过接口的声明规范了方法的入参和出参，避免了在编写过程中出现的低级错误,javascript中没有interface的字段

## 4.4 css工具 ##

css工具  
http://www.javanx.cn/20190320/vs-code-css/  
相关工具  
https://juejin.im/post/5db66672f265da4d0e009aad

##    4.5 开发部署前端 ##

大公司里怎样开发和部署前端代码？  主要为html5  
https://www.zhihu.com/question/20790576/answer/523775863  
大公司app发版周期

## 4.6 VSCode使用 ##

VSCode设置中文语言显示  
https://blog.csdn.net/qq\_30068487/article/details/82589347

VsCode如何同时打开多个项目  
https://blog.csdn.net/Thinkingcao/article/details/102821907

[https_www.zhihu.com_question_47244505_answer_105026648]: https://www.zhihu.com/question/47244505/answer/105026648
[https_blog.csdn.net_Jesse_Mx_article_details_88621950]: https://blog.csdn.net/Jesse_Mx/article/details/88621950
[https_www.jianshu.com_p_c091cef64fa5]: https://www.jianshu.com/p/c091cef64fa5