【猿说VUE】初识VUE，带你打开VUE之门

最新推荐文章于 2025-02-19 00:01:18 发布

黑白猿

最新推荐文章于 2025-02-19 00:01:18 发布

阅读量2.3w

点赞数 4

分类专栏：前端VUE 文章标签：前后端分离 VUE安装 npm命令问题

本文链接：https://blog.csdn.net/gavinbj/article/details/104570725

版权

本文是作者自学VUE的初步心得，详细介绍了VUE的特点、扩展插件，尤其是重点讲解了VUE的安装过程，包括直接引用和命令安装。在命令安装部分，作者分享了在遇到网络问题时如何解决，以及安装Node.js、cnpm等步骤，最后还列举了一些常见的安装问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2 VUE基础：基本认知

自从近几年前后端分离模式开始后，作为从事后端开发的我，为了跟上时代的步伐，或者能够跟现在的年轻人交流，开始了自学VUE的学习之旅。再次记录学习中的点点滴滴，争取把学习过程中的九九八十一难都记录下来，作为自己学习的一个见证，也是对自己的一个督促。

VUE中文官网：https://cn.vuejs.org/

2.1 特点介绍

用于构建用户界面的渐进式JavaScript 框架
遵循MVVM 模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
本身只关注UI, 可以轻松引入vue插件或其它第三库开发项目
借鉴AngularJS的模板和数据绑定技术
借鉴React的组件化和虚拟DOM 技术

2.1 VUE扩展插件

vue-cli：VUE脚手架
vue-resource(axios)：AJAX请求
vue-router：路由
vuex：状态管理
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于VUE的UI组件库(移动端)
element-ui：基于VUE的UI组件库(WEB端)

2.2 VUE安装

2.2.1 直接引用

制作原型或学习的使用最新版本方法：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

注意：生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

2.2.2 命令安装

注意：其实除了必要的Node.js外，我们组内前端的MM告诉我其他的可以不用都一步步验证，可以直接导入现有的项目，然后直接在其基础上进行开发。本人本着初学的态度，想整个体会一遍完成的过程。果然掉进了大坑。本人按照说明替换使用了淘宝的镜像，但是使用cnpm安装其他包的时候，还是因为网络问题导致中途各种问题，基本上反反复复好几遍都没有成功。顺便吐槽一下移动的宽带，因为图便宜，今年家里使用的免费的移动宽带。就是移动网络导致安装过程中因为不稳定等因素，多次卡顿停滞。在折磨的崩溃之际，问了问前端MM，果断切换手机的电信4G热点，后续顺序完成了整个过程的体验。浪费了整整一个晚上的时间，外加上精神的折磨。

2.2.2.1 安装Node.js

使用VUE的基础需要依赖Node.js，所以需要在自己的机器上先进行安装NodeJS。需要访问NodeJS官网进行下载。本人机器是Windows，选择相应版本下载后进行默认安装即可。

安装完成后打开cmd窗口输入node -v和npm -v测试是否已经成功安装。

Microsoft Windows [版本 10.0.16299.1268]
(c) 2017 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>node -v
v12.16.1

C:\Users\Administrator>npm -v
6.13.4

C:\Users\Administrator>

2.2.2.2 安装cnpm

由于许多npm包都在国外，所以推荐用淘宝的镜像服务器，对依赖的module进行安装。参考网址为：http://npm.taobao.org/ 安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org

PS C:\Users\Administrator> cnpm -v
cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.13.7 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.16.1 (C:\Program Files\nodejs\node.exe)
npminstall@3.27.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.16299
registry=https://r.npm.taobao.org

接下来需要给cnpm命令授权，否则在VS Code中无法执行。在运行PowerShell窗口，执行如下命令：set-ExecutionPolicy RemoteSigned，然后输入A 回车。

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): A
PS C:\Users\Administrator>

2.2.2.3 安装`VUE`或者`vue-cli`

使用命令进行安装：cnpm install -g vue

PS C:\vueworkspace> cnpm install -g vue
Downloading vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp\_vue@2.6.11@vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue
Installing vue's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue/node_modules
All packages installed (used 3ms(network 1ms), speed 0B/s, json 0(0B), tarball 0B)
PS C:\vueworkspace>

使用命令进行安装：cnpm install -g vue-cli

PS C:\vueworkspace> cnpm install -g vue-cli
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[15/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.3@handlebars
[16/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[18/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[19/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2020-02-16): 3 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
  2020-02-22
    → request@2.88.2 › har-validator@5.1.3 › ajv@^6.5