win7 x64位 下安装 Vue 开发环境
一、安装nodejs
Node.js 是一个开源与跨平台的JavaScript 运行时环境
在 nodejs官网 https://nodejs.org/en/ ,下载最新版本,发现nodejs最新版本不在支持win7系统
选择nogdejs版本(12.18.4)
所以找个可以支持window7的版本(12.18.4),安装后效果如下
下载安装
https://nodejs.org/zh-cn/download/releases/
选择对应的版本就行,我这边win7,64位选择是的node-v12.18.4-x64.msi
这个安装版.,下载后双击安装下就可以使用了
这里我 安装的是 c:\Program Files\nodejs\ 目录下(默认)
之后一直下一步安装就可以了
检测nodejs安装
当执行完上步安装包安装后,需要进行安装是否成功,win+r打开运行,输入cmd后进入命令行界面。
分别输入node -v 和 npm -v 命令进行node的版本号和npm的版本号的查看。
二、安装完毕后,配置node.js
配置npm安装全局模块路径与缓存路径
NPM是随同NodeJS一起安装的包管理工具
一般,在进行npm install ...等命令全局安装时,默认的会将模块安装C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中。
此时可不进行修改,但便于对C盘数据进行管理,此时这里配置我们自定义的全局模块安装路径和缓存路径,在当前的nodejs安装目录下新建两个文件夹,分别为 node_global 和 node_cache
此时需要win+r打开运行,输入cmd进入命令行界面,分别输入以下内容执行
npm config set perfix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"
配置一个镜像站,为了提升速度,
输入命令 npm config set registry=http://registry.npm.taobao.org 配置镜像站
检查一下镜像站 是否可用命令
npm config get registry
更新一下npm
npm install npm -g
node环境变量配置
在 系统变量 中新建 NODE_PATH 值为 C:\Program Files\nodejs\node_modules
注:下面 修改 用户变量 的步骤 我测试并没有成功,vue还是安装 在 C:\Users\Administrator\AppData\Roaming\npm 目录下。
所以这步不用改, 也是好用的。
在 用户变量 中编辑 用户变量的path,修改对应的 npm的路径值为上文中自定义的node_global路径
原
C:\Users\Administrator\AppData\Roaming\npm
改为
C:\Program Files\nodejs\node_global
改为
三、安装 Vue
Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。
安装vue-cli
vue-cli 是一个官方发布vue.js 项目脚手架,一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
运行cmd调出命令行窗口。命令行里输入:npm --version,显示npm版本大于3.0才能安装vue-cli。
执行 npm install -g @vue/cli
安装Vue
执行 npm install vue -g
在 global 的模块目录下就能找到 vue
安装Vue-router
这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。
执行 npm install vue-router -g
查看vue版本
执行 vue -V
运行 Demo
四、新增一个Vue项目 运行Demo
在 C盘 根上 新建 myVue 进入 再建 VueDemo
C:\myVue\VueDemo
运行 -> cmd
执行 cd.. 退到 C盘根目录中
执行 cd myVue 进入刚刚新建的目录中 C:\myVue\VueDemo
初始化,安装依赖
初始化 Vue 项目
执行 vue init webpack vue01
期间会需要输入 回车
期间会询问 是否 Yes/No 输入 y 回车
期间会让进行选择,选择默认就可以
期间会出现一会 警告
最终会出现
进入 vue01目录
安装依赖
执行 npm install
运行
npm run dev
最终出现 http://localhost:8080
在浏览器中访问,出现下图说明 Vue 安装成功,已经运行Demo
按 Ctrl + V 后输入 y 退出
打包
npm run build
此时在 C:\myVue\VueDemo\vue01 目录 会有 dist目录,这个目录下就是编译好的文件
-------------------------------------------------------------------------------
十分感谢 一只小木头. 的分享
https://blog.csdn.net/weixin_42900442/article/details/120855416