Vue入门&环境搭建

2022/3/10 周四

由于最近有页面的需求，模板是用vue写的，之前没学过，所以跟着 b站秦疆老师【狂神说Java】Vue最新快速上手教程通俗易懂 入门vue（主要适用于只需要了解vue的后端同学），并参考菜鸟教程和一些优秀博客，根据自己的情况对重点内容做的笔记。

如有错误，欢迎在评论区指出，非常感谢！

---

一、入门

1. 来自 vue官网(vue2) 的介绍：

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。

2. vue采用的是MVVM设计模式

（1）Model模型层，这里表示JavaScript对象。
（2）View视图层，这里表示DOM（HTML操作的元素）。
（3）ViewModel层是连接视图和数据的中间件。在MVVM架构中，是不允许数据和视图直接通信的。 因此ViewModel能观察到数据的变化，对视图对应的内容进行更新；也能监听到视图的变化，并通知数据发生改变。

Vue.js就是MVVM中的ViewModel层的实现者。

3. 特点

（1）低耦合；
（2）数据能实时刷新，不用刷新页面；
（3）vue能改变DOM元素。

二、环境搭建

1. 先安装node.js

node.js类似于Java的JVM。

（1） 下载安装： https://nodejs.org/en/download/

（2） 打开命令行，node -v 出现版本即安装成功

2. npm（node package manager）

npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），类似于Java的Maven。

（1）正常情况下跟node.js一起被安装了

（2）npm -v 查看npm命令是不是安装成功

3. 使用cnpm镜像

cnpm是中国版的npm，是淘宝定制的cnpm命令行工具，代替默认的npm，跟npm用法完全一致，只是在执行命令时将npm改为cnpm。如果用npm等得太久，推荐使用cnpm。

（1）npm install -g cnpm --registry=https://registry.npmmirror.com
（-g表示装到global目录下）

（2）cnpm -v 输出版本则安装成功

4. 移动本地仓库

不想把仓库放C盘的话，可以移到比如说D盘。

（1）在D盘新建两个文件夹 D:\nodejs\node_global和node_cache

（2）运行命令：
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

（3）npm list -global 显示在D盘就可以了

5. 安装vue

cnpm install vue -g

6. 安装vue-cli脚手架

cnpm install -g vue-cli
（要记得全局安装，否则会安装到你当前的目录，使用上有限制）

7. 安装vue-router

cnpm install vue-router -g

8. 其他常用命令

cnpm config list 可以查看所有配置信息
cnpm info vue 获得vue的信息

三、遇到的问题：

1. 运行npm install 时，卡在 sill idealTree buildDeps 没有反应

网速太慢了

（1）设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org

（2）使用如下命令检验是否成功
npm config get registry
输出淘宝镜像路径，就表示可以

2. [… … … … … …] - idealTree:npm: sill idealTree buildDeps

表示还在安装，不要动

3. 使用了内网，代理报错

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmmirror.com/cnpm failed, reason: getaddrinfo ENOTFOUND registry.npmmirror.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

关掉代理，用无线安装

4. npm版本问题，有一些警告

npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 396 packages in 1m

但是好像安装成功了，所以先不管了

（下一篇：vue笔记day02-创建vue项目&项目搭建问题&项目文件介绍&.vue文件介绍）

---

参考博客：
1.npm——安装教程、安装vue脚手架
2.搭建一个Vue框架
3.搭建一个完整的Vue 框架