ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue环境搭建以及vue项目搭建

2022-06-19 20:00:11  阅读:181  来源: 互联网

标签:npm node vue cnpm 项目 global 环境 搭建


参考教程

suncaper-wiki-06. VUE

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】

  1. 先在 node 的安装目录新建两个文件夹【npm-cashe 和 npm-global】
    在这里插入图片描述

    但是其实也可以在别的地方新建一个目录,里面装 npm-cashe 和 npm-global 文件夹

  2. 在命令行输入命令进行配置

    npm config set prefix "node_global目录的绝对路径"
    
    npm config set cache "node_cache目录的绝对路径"
    

    此时可以查看配置结果 一般在路径 C:\Users\用户 下,会生成一个.npmrc文件,这个文件中就是配置信息

配置环境变量

  1. 新建环境变量 NODE_PATH
    值为 配置的 npm-global 文件中的 npm-modules 文件夹
    【此时这个文件夹还不存在,可以自己在 npm-global 目录中创建一个,或者不用管它,直接在配置环境变量的时候就写上这个不存在的路径】
    【如:D:\Software\Node\node\node_global\node_modules】

  2. 编辑环境变量 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项目

  1. 到需要创建 vue 项目的目录下打开命令行【或者直接打开命令行之后 cd 到项目目录下】

  2. 初始化项目 vue init webpack projectname

    建议前端项目命名 projectname-front,后端项目命名 projectname-backed
    建议前端项目和后端项目分开放

  3. 创建选项
    在这里插入图片描述

    作者信息一般在 GITCONFIG 文件 (.gitconfig)文件中,文件路径【C:\Users\用户】

    另外:这是个十分漫长的构建过程 甚至漫长到我觉得它卡住了 然后 Ctrl + C 强制结束了两次

在以上过程中遇到的问题

【'eslint' 不是内部或外部命令,也不是可运行的程序或批处理文件。】

没有安装 eslint
解决方法:

  1. 管理员身份打开命令行,运行指令 npm -g i eslint-cli

  2. 管理员身份 cd 到项目文件夹,运行指令 npm i eslint --save-dev
    【此时可能前端文件夹还没创建,没事,先 vue init webpack projectname命令创建一个也行,最后会报错的,但是文件夹会创建好】

  3. npm i eslint --save-dev 执行完之后,返回项目文件夹的父目录,重新构建 vue 项目 vue init webpack projectname

    重新构建时会向你确定是否重构【选择 Y】
    【? Target directory exists. Continue? Yes】

  4. 构建完成后,进入项目文件夹,运行 npm run dev

  5. 访问 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

  1. 文件 -- 首选项 -- 设置
  2. 勾选启用 ESLint在这里插入图片描述

标签:npm,node,vue,cnpm,项目,global,环境,搭建
来源: https://www.cnblogs.com/Muhuai/p/16391198.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有