Vue环境搭建

Vue环境搭建 #

VueJS 是一个开源的渐进式 JavaScript 框架，用于开发交互式 Web 界面。

它是用于简化 Web 开发的着名框架之一，VueJS 专注于视图层。它可以很容易地集成到大型项目前端开发没有任何问题。

  • Vue 中文网：https://cn.vuejs.org/

安装 node.js #

安装 #

下载地址：https://nodejs.org/en/download/

windows 版一路往下点

安装完成：

$ npm -v
6.14.6

设置路径 #

设置 nodejs prefix（全局）和 cache（缓存）路径

  1. 在 nodejs 安装路径下，新建 node_global 和 node_cache 两个文件夹

  2. 设置缓存文件夹

    npm config set cache "C:\Program Files\nodejs\node_cache"

    设置全局模块存放路径

     npm config set prefix "C:\Program Files\nodejs\node_global"

设置成功后，之后用命令 npm install XXX -g 安装以后模块就在C:\Program Files\nodejs\node_global 里

安装镜像 #

基于 Node.js 安装 cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装淘宝镜像报错：

npm error code CERT_HAS_EXPIRED
npm error errno CERT_HAS_EXPIRED
npm error request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
npm error Log files were not written due to an error writing to the directory: C:\Program Files\nodejs\node_cache\_logs
npm error You can rerun the command with `--loglevel=verbose` to see the logs in your terminal

解决办法：

npm config set strict-ssl false

得到新错误：

npm error code EPERM
npm error syscall mkdir
npm error path C:\Program Files\nodejs\node_cache\_cacache
npm error errno -4048
npm error Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_cacache'
npm error     at async mkdir (node:internal/fs/promises:858:10)
npm error     at async Object.insert (C:\Program Files\nodejs\node_modules\npm\node_modules\cacache\lib\entry-index.js:126:5)
npm error     at async CacheEntry.store (C:\Program Files\nodejs\node_modules\npm\node_modules\make-fetch-happen\lib\cache\entry.js:308:7)
npm error     at async fetch (C:\Program Files\nodejs\node_modules\npm\node_modules\make-fetch-happen\lib\fetch.js:98:7)
npm error     at async RegistryFetcher.packument (C:\Program Files\nodejs\node_modules\npm\node_modules\pacote\lib\registry.js:90:19)
npm error     at async RegistryFetcher.manifest (C:\Program Files\nodejs\node_modules\npm\node_modules\pacote\lib\registry.js:128:23)
npm error     at async #fetchManifest (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1199:20)
npm error     at async #nodeFromEdge (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1037:19)
npm error     at async #buildDepStep (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:901:11)
npm error     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:181:7) {
npm error   errno: -4048,
npm error   code: 'EPERM',
npm error   syscall: 'mkdir',
npm error   path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache',
npm error   requiredBy: '.'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It's possible that the file was already in use (by a text editor or antivirus),
npm error or that you lack permissions to access it.
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error Log files were not written due to an error writing to the directory: C:\Program Files\nodejs\node_cache\_logs
npm error You can rerun the command with `--loglevel=verbose` to see the logs in your terminal

解决办法：给与node.js文件夹权限

设置环境变量 #

设置环境变量可以使得住任意目录下都可以使用 cnpm、vue 等命令，而不需要输入全路径。

  1. 鼠标右键 “此电脑”，选择 “属性” 菜单，在弹出的 “系统” 对话框中左侧选择 “高级系统设置”，弹出 “系统属性” 对话框。

  2. 修改系统变量 PATH

    增加：C:\Program Files\nodejs\node_global

  3. 新增系统变量 NODE_PATH，为 nodejs 安装目录下的 node_modules 文件夹。

    增加：C:\Program Files\nodejs\node_modules\

安装Vue # 

cnpm install vue -g

报错：

cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确
，然后再试一次。
所在位置 行:1 字符: 1
+ cnpm install vue -g
+ ~~~~
    + CategoryInfo          : ObjectNotFound: (cnpm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

解决办法：

重新打开命令行

报错：

cnpm : 无法加载文件 C:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 http
s:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm install vue -g
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决办法：

管理员模式打开PowerShell,输入 set-ExecutionPolicy RemoteSigned,选择y

安装 vue 命令行工具

cnpm install vue-cli -g

验证安装：

$ vue -V
2.9.6

创建新项目 #

根据模版创建新项目 #

在当前目录下输入 “vue init webpack-simple 项目名称（使用英文）”。

vue init webpack-simple mytest

安装工程依赖模块 #

定位到 mytest 的工程目录下，安装该工程依赖的模块。

这些模块将被安装在：mytest\node_module 目录下，node_module 文件夹会被新建，而且根据 package.json 的配置下载该项目的 modules

$ cd mytest
$ cnpm install

运行项目 #

测试一下该项目是否能够正常工作，这种方式是用 nodejs 来启动。

$ cnpm run dev

此时，访问 http://localhost:8080/ ，项目正常运行。