基于NodeJs 的Vue安装和创建项目

基于NodeJs 的Vue安装和创建项目

一、Node.js的下载与安装

下载地址: https://nodejs.org/en/download/prebuilt-installer

安装完之后,启动 cmd命令行,验证 Node.js 是否安装成功

在这里插入图片描述

二、配置npm的全局模块的存放路径以及缓存的路径

注:我的安装路径为 D:\tools\node

在上面我们已经完成了 Node.js 的安装,即使不进行此步骤的环境变量配置也不影响Node.js的使用。但是,若不进行环境变量配置,那么在使用命令安装 Node.js全局模块 (如:npm install -g vue)时,会默认安装到C盘的路径 (C:\Users\用户名\AppData\Roaming\npm) 中。因此,我们需要配置 全局安装模块 node_global 以及 缓存目录 node_cache 的环境变量。

// 设置全局模块安装路径
npm config set prefix "D:\tools\node\node_global"

// 设置全局缓存存放路径
npm config set cache  "D:\tools\node\node_cache"

// 查看npm全局安装包保存路径
npm config get prefix

// 查看npm装包缓存路径
npm config get cache

// 查看全局安装目录
npm list -global

// 查看所有npm 配置
npm config list

在这里插入图片描述

三、设置电脑环境变量

1、在【系统变量】中新建环境变量 NODE_PATH,变量值为:D:\tools\node\node_global\node_modules,其中 D:\tools\node\node_global 是新创建的全局模块安装路径。在这里插入图片描述
2、在【系统变量】下的【Path】中添加上Node的路径【D:\tools\node】
在这里插入图片描述
3、修改【用户变量】中的 【Path】 变量,将 C:\Users\用户名\AppData\Roaming\npm 修改为D:\tools\node\node_global
在这里插入图片描述
4、设置完用户变量后,一路点击确定,我们的电脑环境变量就完成了。

四、Windows下使用npm安装任何包都报错, Windows下使用npm显示权限不够

在这里插入图片描述
查看Nodejs安装目录,右键发现在重命名以及删除前面有个盾牌标志这就是 node文件夹 权限不够的原因

在这里插入图片描述
右键Nodejs安装目录,我的是文件夹名称是nodejs,点击属性, 如图,设置属性即可。
在这里插入图片描述

五、安装vue及脚手架

5.1、安装vue.js

在 cmd 窗口中输入以下指令 全局安装Vue模块

//	全局安装Vue模块  -g 表示全局安装
npm install vue -g

查看安装的vue信息
npm info vue

查看安装的vue版本
npm list vue

5.2、安装webpack模板

npm install webpack -g

//webpack将命令相关的内容都放到了 webpack-cli,所以还需要安装 webpack-cli
npm install --global webpack-cli

//webpack -v查看版本号
webpack -v

5.3、安装脚手架vue-cli 2.x

//全局安装vue-cli脚手架
npm install vue-cli -g

//检查其版本是否正确
vue -V
vue --version

//安装上Vue路由:vue-router
npm install vue-router -g 

六、使用vue-cli2创建运行vue项目

1.创建代码

在想要创建的位置路径下打开cmd(直接点击路径输入cmd即可打开当前位置的终端)

输入命令:vue init webpack 项目名(初始化一个完整版的项目),执行效果如图

在这里插入图片描述

配置详解:

Project name(项目名称):回车
Project description(项目描述):回车
Author(作者名):回车
Vue build ==> (是否安装编译器)runtime-compiler、 runtime-only 都是打包方式,第二个效率更高;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到路由,所以Y 回车;
Use ESLint to lint your code ==> 是否需要ESLint检测代码,目前我们不需要所以 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车;
Should we run npm install for you after the project has been created? (recommended) ==> 安装依赖 npm install

最后结果如下,项目初始化成功
在这里插入图片描述

2.运行项目

进入到项目目录下并运行 npm run dev,如图所示

在这里插入图片描述
按提示打开地址 http://localhost:8080, 打开网址如图所示
在这里插入图片描述

最近更新

  1. TCP协议是安全的吗?

    2024-06-10 02:50:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-10 02:50:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-10 02:50:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-10 02:50:04       18 阅读

热门阅读

  1. 深入解析:MySQL连接超时问题排查与优化策略

    2024-06-10 02:50:04       10 阅读
  2. QuanTA: 一种新的高秩高效微调范式

    2024-06-10 02:50:04       9 阅读
  3. 【环境搭建】5.阿里云ECS服务器 安装Nginx

    2024-06-10 02:50:04       8 阅读
  4. 68、石子合并

    2024-06-10 02:50:04       7 阅读
  5. 2024.6.9刷题记录

    2024-06-10 02:50:04       10 阅读
  6. 阻止div的点击事件冒泡

    2024-06-10 02:50:04       9 阅读
  7. LVGL网格布局测试

    2024-06-10 02:50:04       8 阅读