Vue入坑

不买Huracan不改名

已于 2022-12-10 11:45:00 修改

阅读量435

点赞数 1

分类专栏： for_myself 文章标签： vue.js javascript 前端

于 2022-11-25 21:06:27 首次发布

本文链接：https://blog.csdn.net/qq_54078539/article/details/128044531

版权

for_myself 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、认识Vue

2、安装Node.js（1）进入Node.js官网https://nodejs.org/zh-cn/

编辑

2、执行命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

1、认识Vue

Wue(读音/vju:/，类似于view)是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工县摄以及各种支持啦库结合使用时,Vue也完全能够为复杂的单页应用提供驱动.

https://cn.vuejs.org/

2、安装并且配置Node.js

进入Node.js官网https://nodejs.org/zh-cn/

在这里插入图片描述

然后install安装即可

在这里插入图片描述

安装完成
控制台测试

————————————————
版权声明：本文为CSDN博主「蓝盒子itbluebox」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44757034/article/details/118926442

(如果是第一次安装请直接跳过下面内容直接去 3)

使用vue init webpack my-App 创建项目回车时显示
Command vue init requires a global addon to be installed.
Please run yarn global add @vue/cli-init and try again.

解决方法：npm install -g @vue/cli-init

在这里插入图片描述

然后创建项目，正常。

在这里插入图片描述

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

比如，我希望将全模块所在路径和缓存路径，放在我node.js安装的文件夹中，则在我安装的文件夹【"D:\nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

3.2.执行命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
另外的有
npm config get prefix查看npm全局安装包保存路径
npm config get cache查看npm装包缓存路径

还可以输入npm list -global命令来查看全局安装目录：

npm config list查看所有npm 配置

3.3 node.js环境变量配置

说明：以下D:\nodejs为我的node的安装路径，记得改成你们自己的路径

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，进入环境变量对话框

1、【系统变量】下新建【NODE_PATH】，此处设置第三方依赖包安装目录
如果跟着第2步修改了全局安装目录，则输入【D:\nodejs\node_global\node_modules 】

2、【系统变量】下的【Path】添加上node的路径【D:\nodejs\】

3、如果设置了全局安装目录，【用户变量】下的【Path】将默认的 C 盘下 APPData/Roaming\npm 修改为【D:\nodejs\node_global】，【D:\nodejs\node_cache】，这是nodejs默认的模块调用路径

————————————————

4.配置淘宝镜像源

查看npm下载源 npm config get registry (发现本身就是淘宝的下载源) 所以这步跳过了

如果这里跳过不了请你直接看这个链接:然后回来:

Vue安装及环境配置、开发工具_袁小萌同学的博客-CSDN博客_vue环境安装与配置

5.安装vue及脚手架

5.1.安装vue.js

npm install vue -g或者cnpm install vue -g

根据自己的淘宝镜像源设置选择命令，其中-g是全局安装，指安装到global全局目录去

比如我自己是在新建文件夹D:\node-js-workspace下: 记得加上 -g (我给忘了)

报错:

npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path D:\Node-js\node_cache\_cacache
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\Node-js\node_cache\_cacache'
npm ERR! [Error: EPERM: operation not permitted, mkdir 'D:\Node-js\node_cache\_cacache'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'mkdir',
npm ERR! path: 'D:\\Node-js\\node_cache\\_cacache',
npm ERR! requiredBy: '.'
npm ERR! }