前端Nodejs和vue-cli的下载及vue-cli的ui界面使用及一个项目的配置

最新推荐文章于 2024-07-18 11:19:22 发布

sing__star

最新推荐文章于 2024-07-18 11:19:22 发布

阅读量943

点赞数 3

分类专栏： vue.js 文章标签： node.js javascript vue.js

本文链接：https://blog.csdn.net/qq_44774831/article/details/115480438

版权

vue.js 专栏收录该内容

36 篇文章 5 订阅

订阅专栏

本文详细介绍了前端开发中Node.js、npm的用途和关系，以及VueCLI的安装和使用，包括如何解决npm命令找不到的问题、创建Vue项目、配置UI界面、安装element-ui和axios等插件。通过实例操作，帮助读者掌握前端开发的基本流程。

摘要由CSDN通过智能技术生成

前端使用的npm命令是依赖于nodejs安装包的，平时经常用npm install --包。但从来不曾想为什么这样？

前端Nodejs和vue-cli的下载及vue-cli的ui界面使用

前端Nodejs和vue-cli的下载及vue-cli的ui界面使用

本文先介绍nodejs和npm，然后介绍vue脚手架及其ui界面的启动与管理

nodejs和npm关系

1.nodejs和npm的关系

为什么需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用！
当一个网站依赖的js代码越来越多，程序员发现这是一件很麻烦的事情：

  去 jQuery 官网下载 jQuery 
  去 BootStrap 官网下载 BootStrap 
  去 Underscore 官网下载 Underscore 
   ……

npm，全称是 Node Package Manager 包管理工具，是内置在nodejs中的。这一点和maven、gradle十分相似，只不过maven、gradle是用来管理java jar包的，而npm是用来管理js的。

	实现思路：
   	1、有一个远程代码仓库（registry），在里面存放所有需要被共享的js代码，每个js文件都有自己唯一标识。
    2、用户想使用某个js的时候，只需引用对应的标识，js文件会自动下载下来。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。 ------来源于百度百科的解释
npm是包含在node.js里面的一个包管理工具，是内置在nodejs中的。这也是为什么我们要使用npm install命令时需要安装nodejs。就如同linux中的yum仓库，rpm包管理；如同python中的pip包管理工具一样。而这些包管理工具都是予以使用的人们方便，同时解决各种包依赖之间的关系的。

node.js安装

1、进入nodejs下载官网，下载适合自己电脑版本的安装包
在这里插入图片描述
2、下载好.msi安装包后，双击运行安装程序，选择 “Next”。

3、勾选 “I accept the terms in the License Agreement”，然后单击 “Next”。

在这里插入图片描述
4、选择安装路径，如果不想修改，（如果你的c盘空间小，最好选择安装在其他盘里面。不把东西安装在c盘是个好习惯！这里我安装在D盘）则直接点击 “Next”。

5、保持默认，默认会自动创建环境变量，不需要手动配置。千万不要把 Add to PATH 禁止。直接单击 “Next”。
在这里插入图片描述
6、此处无需勾选，直接点击 “Next”即可

7、直接点击 “Install”，便可进行安装。

10、然后打开cmd进行测试，确定Node.js是否安装成功。按Windows键+R，运行cmd，输入命令 node -v 或（命令中间有一个空格），若显示版本，就说明安装成功。
在这里插入图片描述

在工具中使用npm命令出现：npm‘ 不是内部或外部命令,也不是可运行的程序或批处理文件

安装了node.js之后，使用npm命令或npm-v可能会提示 ‘npm’ 不是内部或外部命令,也不是可运行的程序或批处理文件。那么有可能是环境变量没设置好。
解决办法：
1.Window10系统中，win+E打开我的电脑-然后右键属性-高级系统设置-环境变量
在这里插入图片描述
2.然后点击path–添加路径

3.找到之前安装nodejs的路径，添加在path里面，具体看图片：

安装vue-cli脚手架

要启动一个vue项目，我们需要提前安装脚手架，在npm命令下输入npm install -g @vue/cli即可

1.旧版本卸载(如果没安装过旧版本请忽略)
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

2.用npm命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

3.检查是否安装成功

vue --version

4.如需升级全局的 Vue CLI 包

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli
// 如果用yarn报错  使用npm install -g yarn 安装yarn

启动vue cli脚手架的ui配置界面

1.首先先创建一个放项目的文件夹，然后在该文件夹下启动脚手架
在文件夹下的空白处：按住shift + 鼠标右键，启动

在这里插入图片描述
2.进入powershell后，输入vue ui

如果出现以下界面，使用以下图片中的步骤，如果没有，请忽略！
A.找到电脑左下角windows图标，然后右键…

B.执行：set-ExecutionPolicy RemoteSigned （签名或运行这些脚本）

3.这样就成功启动vue cli的ui界面了

创建vue项目并进行基本的配置

1.创建
在这里插入图片描述
2.详情配置

3.预设配置（此前做过项目的保存的一些配置，可以直接用以前项目中配置好的。这里我们手动）

在这里插入图片描述
4.配置功能（选中 Babel Router Linter 使用配置文件）这里如果不想太麻烦，可以不安装lint，因为校验格式很严格，容易让人抓狂。如果对自己要求严格，可安装…

5.

6.是否保存位预设（下次可以使用这样的预设），这里我点击创建项目，不保存预设。
在这里插入图片描述
7.进入可视化管理界面，按照步骤我们成功打开网页

在浏览器中打开的网页

8.然后我们可以通过VScode或者IDEA打开创建项目的文件地址
如图在idea中打开
在这里插入图片描述

项目结构：

进入之后，一个空白的项目就此生成，关于具体的各个文件夹的作用及怎样进行配置和修改，在后面的文章中我会一一写出…

在vue-cli的可视化面板中安装一些插件和依赖

这里主要是为了提醒一些包的安装到底是插件，运行依赖还是开发依赖。
前面创建项目的过程中，我们已经配置了一些基本的比如选中 Babel Router Linter 使用配置文件等
在具体项目开发中，我们经常需要使用到别人的框架，所以我们需要安装一些插件或依赖

1.安装element-ui（插件）

可视化面板中点击插件，然后输入vue-cli-plugin-element
在这里插入图片描述

2.配置axios（运行依赖）

在这里插入图片描述
…

原创文章，禁止转载

sing__star

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端Nodejs和vue-cli的下载及vue-cli的ui界面使用及一个项目的配置

前端使用的npm命令是依赖于nodejs安装包的，平时经常用npm install --包。但从来不曾想为什么这样？前端Nodejs和vue-cli的下载及vue-cli的ui界面使用nodejs和npm关系node.js安装在工具中使用npm命令出现：npm‘ 不是内部或外部命令,也不是可运行的程序或批处理文件安装vue-cli脚手架启动vue cli脚手架的ui配置界面创建vue项目并进行基本的配置在vue-cli的可视化面板中安装一些插件和依赖1.安装element-ui（插件）2.配置axios（
复制链接

扫一扫