Vue学习笔记

为什么选择 Vue

截至 2021-01 ，前端框架主要还是 Vue 和 React，而且后者在社区的活跃度是更高的，Vue 在 git 的星标是110万，而 React 则是 500多万。那我们为什么选择 Vue？主要原因有：

• Vue 是国人开发的，中文文档、中文社区完善；
• Vue 更简单，现在好多国内的互联网公司都在用这个；

---

学习资料

• Vue 官网
• Vue3 文档
• Vue2 菜鸟教程，这个主要是以单 html 文件形式学习 Vue，而不是以 Vue-cli 的项目形式讲解的；

【名词解释】
js 一种编程语言
node.js 是js的运行环境，可以写后端、前端
nvm 是js的版本管理工具
npm 是js的第三方包的管理工具
cnpm 是npm的国内淘宝镜像，网络更加快速稳定
vue 基于js的前端框架
vue-cli 基于vue的命令行工具。如果只是写几个页面，不需要cli；如果是大型项目，一定要cli

【文档】
https://v3.cn.vuejs.org/ // vue的官方文档
https://cli.vuejs.org/zh/ // vue-cli的官方文档
https://www.cnblogs.com/ilkezd/p/16465911.html // nvm相关命令
https://www.w3cschool.cn/vue3course/
https://blog.csdn.net/weixin_45647685/article/details/123557666

【工具】
安装浏览器插件 Vue.js devtools
WebStorm 配置好node.js的本地地址、再配置好vue-cli的地址之后，可以方便的启动程序
本质上，vue就是把js写成了一个后台服务，然后我们学习它校对好的语言，用这个后台服务来渲染前端框架。

【命令行】
npm install -g vue@next // 安装最新稳定版的vue
npm install -g @vue/cli

# mac环境安装vue
## 第一步、安装node.js
Mac系统下用 pkg 安装，会自动配置环境变量；下载网址：http://nodejs.cn/download/，由于前端的技术更新的很快，因此版本推荐v12.22.10；

默认安装位置如下所示
Node.js v12.22.10 在 /usr/local/bin/node
npm v6.14.16 在 /usr/local/bin/npm
安装前要保证 /usr/local/bin is 在 $PATH 里面

## 第二步、验证node.js的安装
npm是node.js自带的包管理工具。
npm -v  # 打印npm的版本
node -v  # 打印node.js的版本

## 第三步、配置包的安装地址
修改安装包的位置。
npm config set cache /users/yangsong/node_repo/cache  # 配置包的缓存位置
npm config set prefix /users/yangsong/node_repo/prefix  # 配置包的安装位置
npm config ls  # 打印配置
npm root -g  // 打印包下载的目录
npm list -g  // 打印全局配置下，包的安装列表

## 安装Vue
Vue是node.js生态中的第三方包。目前推荐vue2，用的人多；暂时不推荐vue3。
npm uninstall -g @vue/cli  # 卸载vue-cli3版本的脚手架
npm uninstall -g vue-cli  # 卸载vue-cli2版本的脚手架
npm install -g vue-cli  # 安装vue-cli2版本的脚手架
vue -V  // 打印版本，检查是否安装成功；如果不成功，大多数是因为mac环境变量的问题，参考这个文档配置 https://juejin.cn/post/7073026576765419528

# 创建vue-cli项目
参考 https://cloud.tencent.com/developer/article/1398382
注意，vue2和vue3的创建方式完全不同。以上是vue-cli的创建

# 安装axios
npm install axios --save-dev  // 这里又不需要用-g了，不知道为什么

---

开发环境

• 安装主要开发工具 WebStorm，建议淘宝破解；
• 安装 Node.js，安装方式参考这篇文章；
• 安装 Vue CLI，它是 Vue 开发的脚手架，是搭建 Vue 前端项目的框架，安装命令 npm install -g @vue/cli --registry=https://registry.npm.taobao.org；卸载旧版 vue-cli 的命令： npm uninstall vue-cli -g；
• 安装 Webpack，它是模块打包机，通过分析项目结构，将项目代码打包为浏览器可以使用的格式，安装命令 npm install -g webpack --registry=https://registry.npm.taobao.org；

使用 CDN 方法引入 Vue 的站点地址：
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg: https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

• WebStorm 是可以这样配置，增加快速启动

---

笔记

• 安装教程给出了很多安装 Vue 的方式。但不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时；

---

Tips

• 前端调试时，常常使用 document.write("Hello World!"); 这个 js 方法，以观察变量赋值是否正确；
• html 和 js 代码更新后，在浏览器要清空缓存；否则前台页面可能不会及时更新；或者使用 cache-control 设置开发环境不缓存；或者webpack-dev-server，改了代码浏览器自动会刷新
• Vue2 和 Vue3 的语法非常不同，我这边统一使用Vue3的语法；
• ES5和ES6规范不一样，按新规范来；
• DOM 是什么意思？怎么理解这个重要的概念？
• vue-cli 用于开发完全前后分离的前端项目，vue也可以写单文件组件化的前端项目；

---

VuePress

VuePress可以将你的markdown文档映射到web中，构建一个文档url链接。
学习资料

• 官方文档：https://www.vuepress.cn/

# 安装
npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .