栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

vue.js开发环境安装教程

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue.js开发环境安装教程

一、nodejs安装—npm安装
1.nodejs安装
①下载对应系统版本的Node.js:https://nodejs.org/en/download/
② 运行程序开始安装,一路next最终install即可
2.npm安装(新版Node.js已自带npm)
③检测是否安装成功。快捷键win+R,输入cmd回车打开cmd窗口
node -v   查看node.js的版本号
npm -v    查看node.js自带的npm的版本号
3.配置环境变量
【说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:Users用户名AppDataRoamingnpm】路径中,占C盘空间。】
【而这个安装路径 可以 通过配置环境变量 来设置】
例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则
4.在我安装的文件夹【D:nodejs】下创建两个文件夹【node_global】及【node_cache】
cmd窗口输入命令:
npm config set prefix"D:nodejsnode_global"
npm config set cache "D:nodejsnode_cache"
5.系统配置环境变量,“我的×××”——“右键”——“属性”——“高级系统设置”——“高级”——“环境变量”
在弹出的对话框,
①点击“新建”    NODE_PATH    D:nodejsnode_globalnode_modules
②“编辑”    改  PATH   C:UsersAdministratorAppDataRoamingnpm;
为  PATH   D:nodejsnode_global;
③把D:nodejs文件夹下node.exe文件放入PATH目录,把     D:nodejsnode_modules下的npm文件夹复制到D:nodejsnode_globalnode_modules目录下;
6.测试配置是否正确,通过安装个module测试下,如express模块
cmd窗口输入命令:
npm install express -g           安装完可看到文件路径在配置的环境变量路径中
二、vue.js开发环境搭建
1.基于node.js,利用淘宝npm镜像安装相关依赖
在cmd里直接输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装...
2.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
在cmd里:
1)输入:cnpm install -g vue-cli,回车,等待安装...
2)输入:vue,回车,若出现vue信息说明表示成功
3.创建项目
在cmd里输入:vue init webpack vue_test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作

4.安装依赖
在cmd里:
1)输入:cd vue_test(项目名),回车,进入到具体项目文件夹
2)输入:cnpm install,回车,等待一小会儿
回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)
5.测试环境是否搭建成功
方法1:在cmd里输入:先进入项目文件目录,再输入 cnpm run dev
方法2:在浏览里输入:localhost:8080(默认端口为8080)

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241383.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号