学生做义工网站,公司查询网全国企业信息查询官网,深圳建设工程项目网站,微信小程序成本基于NodeJs 的Vue安装和创建项目
一、Node.js的下载与安装
下载地址#xff1a; https://nodejs.org/en/download/prebuilt-installer
安装完之后#xff0c;启动 cmd命令行#xff0c;验证 Node.js 是否安装成功 二、配置npm的全局模块的存放路径以及缓存的路径
注 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 vue5.2、安装webpack模板
npm install webpack -g//webpack将命令相关的内容都放到了 webpack-cli所以还需要安装 webpack-cli
npm install --global webpack-cli//webpack -v查看版本号
webpack -v5.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 打开网址如图所示
