标签:npm node vue cnpm 项目 global 环境 搭建
参考教程
vue环境搭建
node和npm
检查电脑上是否配备 node。
【命令行输入 node -v
】【出现版本信息则说明已经安装好了】
当然如果没有 node 环境,就自己去网上找个教程装好就行了
我就不写了
前端的 npm类似于后端的 Maven,其中一个作用为下载依赖包
【当安装 node 时,npm 就同时安装好了,可以命令行输入npm -v
查看】
配置 npm-cashe 和 npm-global
【因为如果不配置的话,npm默认下载命令等到C盘,十分不爽】
【一般来说,默认的 npm 配置可能在这个地方 C:\Users\用户\AppData\Roaming\npm\node_modules\npm\npmrc】
-
先在 node 的安装目录新建两个文件夹【npm-cashe 和 npm-global】
但是其实也可以在别的地方新建一个目录,里面装 npm-cashe 和 npm-global 文件夹
-
在命令行输入命令进行配置
npm config set prefix "node_global目录的绝对路径" npm config set cache "node_cache目录的绝对路径"
此时可以查看配置结果 一般在路径
C:\Users\用户
下,会生成一个.npmrc文件,这个文件中就是配置信息
配置环境变量
-
新建环境变量 NODE_PATH
值为 配置的 npm-global 文件中的 npm-modules 文件夹
【此时这个文件夹还不存在,可以自己在 npm-global 目录中创建一个,或者不用管它,直接在配置环境变量的时候就写上这个不存在的路径】
【如:D:\Software\Node\node\node_global\node_modules】 -
编辑环境变量 Path 【或者是 PATH】
将刚刚配置的 npm-global 目录配置到环境变量中以上说的环境变量都是系统变量嗷
cnpm
【因为 npm 默认的依赖包下载途径为 外网途径,对我们很不友好,因此要进行配置 cnpm,让其依赖从国内途径获得】
【当然也可以不配置的】
但是国内途径配置方式不仅仅只有 cnpm 一种,还有 yarn 方式
安装命令
从淘宝镜像安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
可能出现的情况:
【报错 ERROR:operation not permitted】
原因:没有操作权限
解决:Win + Q 搜索 cmd ,以管理员身份运行,重新执行命令
说明:
- 下载下来的 cnpm 相关文件在之前配置的 npm-global目录 以及 npm-global/node_modules 目录下
- 因此需要提前对 以上两个目录进行配置【不然就会下载到 C 盘】
注意!!!
- 在安装了 cnpm 之后,就尽量保证同一项目中只使用其中一种【不要一会 npm ,一会 cnpm】
- 当 cnpm 不管用的时候,可以使用 npm
如果使用 cnpm 和 npm 混用导致项目混乱
不要慌!!!
把项目的 node_modules 文件夹删了重新执行cnpm install 或者 npm install
就行了
脚手架搭建
命令
npm install -g vue-cli 或者 cnpm install -g vue-cli
对脚手架的解释:
类似于使用 IDEA 创建 Spring 项目,然后自动生成一堆项目结构文件的意思
保险起见,cmd 还是 管理员身份运行
我是大冤种,给忘了,又报错
和 cnpm 一样,在配置了 global 文件之后,vue-cli 也会在 modules 文件夹下
项目搭建
脚手架搭建VUE项目
-
到需要创建 vue 项目的目录下打开命令行【或者直接打开命令行之后 cd 到项目目录下】
-
初始化项目
vue init webpack projectname
建议前端项目命名 projectname-front,后端项目命名 projectname-backed
建议前端项目和后端项目分开放 -
创建选项
作者信息一般在 GITCONFIG 文件 (.gitconfig)文件中,文件路径【C:\Users\用户】
另外:这是个十分漫长的构建过程
甚至漫长到我觉得它卡住了 然后 Ctrl + C 强制结束了两次
在以上过程中遇到的问题
【'eslint' 不是内部或外部命令,也不是可运行的程序或批处理文件。】
没有安装 eslint
解决方法:
管理员身份打开命令行,运行指令
npm -g i eslint-cli
管理员身份 cd 到项目文件夹,运行指令
npm i eslint --save-dev
【此时可能前端文件夹还没创建,没事,先vue init webpack projectname
命令创建一个也行,最后会报错的,但是文件夹会创建好】
npm i eslint --save-dev
执行完之后,返回项目文件夹的父目录,重新构建 vue 项目vue init webpack projectname
重新构建时会向你确定是否重构【选择 Y】
【? Target directory exists. Continue? Yes】构建完成后,进入项目文件夹,运行
npm run dev
访问 localhost:8080 出现 vue 界面
默认 cmd 的管理员身份打开所在的目录是 C 盘,要是项目不在 C 盘,怎么 cd 进去?
【以我的项目在 D 盘为例】
IDEA创建VUE项目
IDEA 版本不同可能导致操作步骤有些出入
需要先安装插件 Vue.js
IDEA 创建 vue 项目就和 命令行创建的步骤差不多,只是变成了图形化界面。
注意的点就是:
在安装了 cnpm 的情况下,最后的 "是否需要在构建是下载依赖" 的选项可以选 "不用了,待会我自己来"
然后项目创建完成之后在项目终端cnpm install
反正最后我也没搭建好,不知道是不是版本的问题。它后面直接全部帮我默认生成了,然后在下载依赖的时候一堆报错,说没有权限。
【如果有知道怎么回事的大佬,请帮助我一下,我的 IDEA 版本是 2021.2.2,我不弄了awa】
Visual Studio Code创建VUE项目
所需插件
运行
终端 -- npm run dev
搭建
搭不起了,不搭了,网上教程都是用的命令行,唯一一个用终端的我还失败了呜呜呜
毁灭吧,要图形化就去 IDEA 创建吧
项目目录|文件解释
开启ESLint代码检查
以 VS Code 为例
安装插件
设置开启 ESLint
- 文件 -- 首选项 -- 设置
- 勾选启用 ESLint
标签:npm,node,vue,cnpm,项目,global,环境,搭建 来源: https://www.cnblogs.com/Muhuai/p/16391198.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。