位置: IT常识 - 正文

好细的Vue安装与配置(vue安装使用)

编辑:rootadmin
好细的Vue安装与配置 一、下载和安装Vue

推荐整理分享好细的Vue安装与配置(vue安装使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0安装,vue安装使用,安装vue ui,vue的安装步骤,vue安装使用,vue的安装步骤,vue3.0安装,vue2.0安装,内容如对您有帮助,希望把文章链接给更多的朋友!

官网下载地址Download | Node.js

选择适合自己的版本,推荐LTS,长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后,双击下载的安装包。

点next

勾选I accept............,点next 

这里建议更改为自己想要的的安装目录,然后点next(可以自己先建好安装目录,我这里是提前建好的一个目录:E:\Java\nodejs)

这里有五个选项,有时间可以看一下,就是安装的时候会安装一些组件和npm,同时会添加环境变量,右侧有说明。我们直接点next

这里不用勾选,直接点next

install

 finish

安装完成后,检查一下是否安装成功。

打开cmd,输入如下指令。 

node -vnpm -v

输出了版本号就说明安装成功了。

安装后的完整目录:

二、创建全局安装目录和缓存日志目录

 在我们的安装目录下,创建名为node_cache和node_global的两个文件夹。

 

打开Dos窗口,执行如下命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix "你的安装目录\node_global"

npm config set cache "你的安装目录\node_cache"

为了以后下载包快速,修改源为淘宝镜像。(这里修改了,我们就不需要安装cnpm了,因为cnpm就是Node.js淘宝镜像加速器,这里配置了就不需要安装了)

npm config set registry https://registry.npm.taobao.org

查看npm配置修改是否成功

npm config list

同时我们会发现多了个文件:C:\Users\用户名\下的.npmrc文件,可以理解为一个记录当前用户修改信息的配置文件。如果你把这个文件删了,那你刚刚修改的那些参数全没有了,回归默认配置。

三、配置环境变量

在安装过程中,自动配置了两个环境变量一个是环境变量---用户变量---Path里面的C:\Users\你的用户名\AppData\Roaming\npm另一个是环境变量---系统变量---Path里面的软件安装目录,我们需要增加和修改一下。

 1. 环境变量---用户变量---选中Path---点编辑

好细的Vue安装与配置(vue安装使用)

 将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\node_global

2. 环境变量---系统变量---新建

变量名:NODE_PATH

变量值:你的安装目录\node_global\node_modules

注:这里的node_modules目录是还没有的,但是我们等会把模块安装到全局目录下就会自动生成这个文件夹。

记得在系统变量---Path添加上%NODE_PATH% 

 三、安装vue

1. 安装vue.js

npm install vue -g

其中-g是全局安装,指安装到global全局目录去,如果不加-g,模块就会安装到当前路径下的node_modules文件夹下,没有目录则自动创建。

如果出现了这个问题,是因为当前用户没有这个权限。

网上有些方法是删除C:\Users\用户名\下的.npmrc文件,万万不可这样,因为那个文件删除了,我们前面修改的全局模块目录和缓存目录配置就没了!!!到时候vue包就下载到C:\Users\你的用户名\AppData\Roaming\npm去了,也就是默认的地方去了,那我们前面修改就没意义了。

正确的打开方式是,用管理员身份运行呗!

Win + s 搜索 “命令提示符”,右键以管理员身份运行。

npm install vue -g

2. 安装webpack模板

npm install webpack -g

此外,在webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli

npm install webpack-cli -g

输入 webpack -v,能输出版本号就说明都安装好了。

3. 安装脚手架vue-cli

npm install vue-cli -g

  

输入vue --version,能输出版本号就说明安装好了。

4. 安装vue-router

npm install vue-router -g

都弄好了我们打开我们自定义的全局模块目录下的node_modules文件夹,会发现安装的模块都统一在这里。

四、我的第一个的 vue-cli应用程序

1. 创建项目(最好在cd到D盘、E盘的某个位置,即项目的路径,否则项目会新建在C:\Users\用户名\,也可以直接在想要的项目路径下输入cmd)可能会出现权限问题,所以我们还是以管理员运行cmd窗口。

2.  创建一个基于webpack模板的vue应用程序

vue init webpack 项目名

根据自己的需求来操作。

项目名是?回车项目描述?回车作者?回车是否安装编译器 回车是否安装vue-router y 回车是否使用ESLint做代码检查 n 回车是否安装单元测试工具 n 回车单元测试相关 n 回车创建完成后直接初始化 n 回车

因为没有自动初始化,我们按照代码提示手动初始化

cd myvuenpm run dev

 访问网址:成功!

本文链接地址:https://www.jiuchutong.com/zhishi/297865.html 转载请保留说明!

上一篇:能取代90%人工作的ChatGPT到底牛在哪?(工作被取代)

下一篇:编程主要学什么(编程主要学什么东西)

  • servicing文件夹可以删除吗(win10 servicing文件夹)

    servicing文件夹可以删除吗(win10 servicing文件夹)

  • 微信怎样设置群消息免打扰(微信怎样设置群里不能加我)

    微信怎样设置群消息免打扰(微信怎样设置群里不能加我)

  • 荣耀x10和荣耀play4的区别(荣耀x10和荣耀play哪个好)

    荣耀x10和荣耀play4的区别(荣耀x10和荣耀play哪个好)

  • apple store上取消订单多久到账(apple store上取消商品后,费用怎么退回)

    apple store上取消订单多久到账(apple store上取消商品后,费用怎么退回)

  • xsmax苹果双卡双待吗(iphone xsmax双卡双待)

    xsmax苹果双卡双待吗(iphone xsmax双卡双待)

  • 苹果计算器上的百分号怎么按出来(苹果计算器上的rand)

    苹果计算器上的百分号怎么按出来(苹果计算器上的rand)

  • 冰箱包装扔了能退货吗(冰箱包装扔了能放多久)

    冰箱包装扔了能退货吗(冰箱包装扔了能放多久)

  • 手机qq邮箱怎么发视频给别人(手机qq邮箱怎么发压缩包)

    手机qq邮箱怎么发视频给别人(手机qq邮箱怎么发压缩包)

  • 苹果手机6sp来电闪光灯怎么设置(iphone6s来电没有声音怎么回事)

    苹果手机6sp来电闪光灯怎么设置(iphone6s来电没有声音怎么回事)

  • nova7支持nfc功能吗(nova7全系支持nfc)

    nova7支持nfc功能吗(nova7全系支持nfc)

  • 小米10反向充电异常(小米10反向充电可以给哪些手机充电)

    小米10反向充电异常(小米10反向充电可以给哪些手机充电)

  • 手机明明连上网络了,为什么没网(手机明明连上网了,为什么不能用)

    手机明明连上网络了,为什么没网(手机明明连上网了,为什么不能用)

  • iwatch死机怎么重启(iwatch开机卡住)

    iwatch死机怎么重启(iwatch开机卡住)

  • vivo手机安装包删不掉(vivo手机安装包删除了怎么恢复)

    vivo手机安装包删不掉(vivo手机安装包删除了怎么恢复)

  • 退款撤销后能再申请吗(撤销了退款还可以申请)

    退款撤销后能再申请吗(撤销了退款还可以申请)

  • iphone11pro max和11pro区别(iphone11pro max和11屏幕效果对比大吗)

    iphone11pro max和11pro区别(iphone11pro max和11屏幕效果对比大吗)

  • oppo手机怎么清理运行程序(oppo手机怎么清理内存空间不足)

    oppo手机怎么清理运行程序(oppo手机怎么清理内存空间不足)

  • word文档只读不能修改(word只读不能编辑怎么办)

    word文档只读不能修改(word只读不能编辑怎么办)

  • 华为路由A2有几根天线(华为无线路由器a2怎么样)

    华为路由A2有几根天线(华为无线路由器a2怎么样)

  • wikihow怎么设置成中文(wikihow怎样设置中文)

    wikihow怎么设置成中文(wikihow怎样设置中文)

  • r5 2600x配什么主板(r5 2600x用什么散热器好)

    r5 2600x配什么主板(r5 2600x用什么散热器好)

  • 快手充值怎么退款(快手充值怎么退不了了)

    快手充值怎么退款(快手充值怎么退不了了)

  • 小米ai音箱如何删除收藏中的音乐(小米AI音箱如何关闭)

    小米ai音箱如何删除收藏中的音乐(小米AI音箱如何关闭)

  • win10锁屏壁纸保存方法(window10锁屏壁纸图片在哪)

    win10锁屏壁纸保存方法(window10锁屏壁纸图片在哪)

  • 出口企业的退税属不属于纳税总额
  • 劳务费用 税率
  • 不确认销售收入结转销售成本
  • 增值税小规模纳税人
  • 金税四期影响企业贷款吗
  • 定期定额征收如何办理税费认定
  • 维修费收入怎么结转成本
  • 企业财务独立核算
  • 微信支付宝收入计入科目
  • 发票只能全部冲开吗
  • 税控设备抵减增值税必须当月抵减吗
  • 收到软件发票怎么做账
  • 企业资产负债表图片
  • 银行本票超过付款期限可以向出票人追索吗
  • 留抵税额注销时,会计分录
  • 西安的税务局
  • 小规模纳税人未建账处罚
  • 固定资产叉车卖出怎么开票
  • 注册资金怎么提出来
  • 企业代收代缴水电费出现差额怎么解释
  • 报销款冲抵其他应收款怎么做账?
  • 现金流量表的填写视频
  • 个人代开专票季未超30万附加税需要交吗
  • 利润调整分录
  • 微软输入法突然变成繁体字怎么改回来
  • 上月印花税计提多了如何冲回
  • 上年多计提所得税怎么做会计分录
  • 购买监控设备费用谁出
  • 申报高新企业的当年一定要研发费用加计扣除吗
  • 职工食堂的费用,会计上怎么做账?
  • win10怎么设置硬盘为第一启动项
  • 慈善捐赠金额排行
  • 鼠标按键多有用吗
  • phpget方法
  • 十大网页游戏
  • 结转已销售产品的实际生产成本会计分录
  • php实现base64图片上传方式实例代码
  • php获取随机数
  • 社保缴费工资和实发工资不一样
  • 税务申报说明怎么写范文
  • RocketMQ-02
  • 处置固定资产科目
  • 增值税普通发票几个点
  • 总结帝国cms内容是什么
  • 科技型中小企业有什么好处
  • 套期保值和套期图利
  • 所得税费用影响企业营业利润吗
  • 无形资产摊销计算方法
  • 息税前利润的计算公式中的利息费用
  • 现金折扣不考虑增值税
  • 职工薪酬纳税调整
  • 支付货代运费账务处理
  • 收取会费
  • 研发收入超过研发成本
  • 业务收入和营业收入关系
  • win7双系统安装教程
  • 微软新品发布
  • ubuntu系统睡眠
  • xp系统怎么添加ip地址
  • ubuntu安装chia
  • win7系统如何屏幕放满屏幕
  • win7怎么修改开始菜单样式
  • unity加密解决方案
  • node_
  • glrotatef函数
  • cocos2dx4.0教程
  • jquery插件是干什么的
  • jquery 列表控件
  • 基于javascript的毕业设计
  • 在xml文件里使用的命令
  • javascript toggle
  • 国家税务总局会议管理办法
  • 北京东城区社保电话
  • 小规模纳税人开专票
  • 成都税务局发票查询
  • 广东省地方税务局历任局长
  • 房产税江苏2021年征收标准
  • 现任新疆兵团政治部主任
  • 四川税务法人实名采集
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设