位置: 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到底牛在哪?(工作被取代)

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

  • 小米摄像头怎么插内存卡(小米摄像头怎么看回放)

    小米摄像头怎么插内存卡(小米摄像头怎么看回放)

  • 支付宝商家服务里的钱怎么提现(支付宝商家服务有什么坏处)

    支付宝商家服务里的钱怎么提现(支付宝商家服务有什么坏处)

  • 如何调整电脑屏幕亮度(如何调整电脑屏幕显示比例)

    如何调整电脑屏幕亮度(如何调整电脑屏幕显示比例)

  • 发朋友圈 可以调时间吗(发朋友圈可以@人吗)

    发朋友圈 可以调时间吗(发朋友圈可以@人吗)

  • 华为手机为什么自动拨110(华为手机为什么没有5G手机了)

    华为手机为什么自动拨110(华为手机为什么没有5G手机了)

  • 佳能打印机绿灯黄灯交替闪(佳能打印机绿灯橙灯交替闪)

    佳能打印机绿灯黄灯交替闪(佳能打印机绿灯橙灯交替闪)

  • 苹果蓝牙耳机2代和3代的区别(苹果蓝牙耳机2代什么时候出的)

    苹果蓝牙耳机2代和3代的区别(苹果蓝牙耳机2代什么时候出的)

  • 微信进群操作频繁多久解除(微信进群操作频繁,已经3天了)

    微信进群操作频繁多久解除(微信进群操作频繁,已经3天了)

  • 苹果11pro max截屏怎么截(苹果11promax截屏方式有几种)

    苹果11pro max截屏怎么截(苹果11promax截屏方式有几种)

  • 华为mate30pro5g音量怎么调节(华为mate30pro音效设置方法)

    华为mate30pro5g音量怎么调节(华为mate30pro音效设置方法)

  • 允许微信访问你的相机怎么设置(允许微信访问你的摄像头和麦克风苹果手机)

    允许微信访问你的相机怎么设置(允许微信访问你的摄像头和麦克风苹果手机)

  • photo shop是什么软件(photoo shop)

    photo shop是什么软件(photoo shop)

  • 300兆光纤用哪种网线(300兆光纤用哪种路由器)

    300兆光纤用哪种网线(300兆光纤用哪种路由器)

  • 什么叫结构化程序设计(什么叫结构化程度)

    什么叫结构化程序设计(什么叫结构化程度)

  • 微型计算机按照结构可以分为哪几种(微型计算机按照装机方式分为哪几类)

    微型计算机按照结构可以分为哪几种(微型计算机按照装机方式分为哪几类)

  • 复制链接在快手哪里找到(复制链接在快手上怎么弄)

    复制链接在快手哪里找到(复制链接在快手上怎么弄)

  • 三星a70外形尺寸(三星a70长宽是多少)

    三星a70外形尺寸(三星a70长宽是多少)

  • 怎样清理浏览器缓存(怎样清理浏览器的缓存和垃圾手机)

    怎样清理浏览器缓存(怎样清理浏览器的缓存和垃圾手机)

  • 魅族开机卡flyme转圈圈(魅族开机卡住)

    魅族开机卡flyme转圈圈(魅族开机卡住)

  • js监听页面或元素scroll事件,滚动到底部或顶部(js监听地址栏)

    js监听页面或元素scroll事件,滚动到底部或顶部(js监听地址栏)

  • 大弯国家公园中里奥格兰德河的景色,德克萨斯州 (© Ian Shive/Tandem Stills + Motion)(中国国防科技大学 博士)

    大弯国家公园中里奥格兰德河的景色,德克萨斯州 (© Ian Shive/Tandem Stills + Motion)(中国国防科技大学 博士)

  • phpcms如何更新缓存(php 更新)

    phpcms如何更新缓存(php 更新)

  • 删除织梦DEDECMS个人书签的方法(织梦一直显示上一页和下一页)

    删除织梦DEDECMS个人书签的方法(织梦一直显示上一页和下一页)

  • 现代服务税目包含哪些
  • 党建经费提取比例10%
  • 小规模纳税人开票税率
  • 加计扣除和研发费不一致
  • 固定资产减少当月
  • 房屋租赁收入核定征收
  • 工资退回怎么处理
  • 固定资产的入账价值怎么计算
  • 新领的发票怎么读入开票系统
  • 汇算清缴的所得税会计分录
  • 存货跌价准备转销账务处理
  • 企业的筹建期间
  • 工程收入怎么算
  • 货币性项目和非货币性项目的区别是什么?如何进行处理?
  • 广告公司的主营业务成本包括哪些
  • 跨年付上年租金帐务处理?
  • 全屏游戏键盘一直打字
  • 一般纳税人车辆过户给个人开票几个点
  • 加油站的成品油经营许可证过期3个月还能换证吗?
  • OS X Yosemite系统怎么样 OS X Yosemite功能介绍
  • 厂区绿化工程计入什么科目
  • 企业所得税清算报备是什么意思
  • 关于笔记本电脑的文案
  • 存入保证金账户分录怎么写
  • 电脑关机了wifi还能检测到在线
  • php中defined什么意思
  • 增值税专票如何查询对方是否抵扣
  • 上飞机可以带2个充电宝吗
  • wordpress用什么开发的
  • 图像质量评价指标及方法 图像工程
  • eslint不起作用
  • 制造费用的工资怎么结转
  • 创建vue3项目的步骤
  • parted命令详解
  • php socket编程
  • 存货盘点会计分录怎么做
  • 不缴纳增值税
  • 应交税金应交增值税科目设置
  • 减免税款的会计分录当月做吗
  • access数据保存
  • 代扣代缴增值税如何申报抵扣
  • 汇算清缴时资产折旧怎么填
  • 财务挂账应该怎么做账
  • 投资购入房产会亏钱吗
  • 三证合一办理流程及费用
  • 公司购买的家电怎么入账
  • 固定资产出售的收入属于收入吗
  • 税控设备抵减增值税金额
  • 行政单位维修管理制度
  • 公司车辆交强险怎么网上买
  • 小规模纳税人企业所得税税率
  • 工程项目立项前包括哪几个过程
  • 出纳怎么做账
  • mysql深度解析
  • mysql 5.6.14 win32 解压缩版(免安装)安装配置教程
  • mysql5.7.32免安装教程
  • 微软6月24号
  • windowsserver2008r2忘记开机密码怎么办
  • linux终端基础命令
  • Win10预览版更新弹窗如何关闭
  • linux的tar
  • RadioSvr.EXE - RadioSvr是什么进程 有什么用
  • shell32.exe - shell32是什么进程 有什么用
  • win7如何设置屏幕不黑屏
  • win7待机时间在哪调
  • linux虚拟空间
  • linux安装步骤
  • js object.seal
  • php消息队列面试题及答案
  • opengl oes纹理
  • jquery左侧导航栏
  • firefox怎样调整为中文
  • 深入探究替换词
  • js设计模式有什么用
  • linux shell脚本攻略(第3版)
  • javascript面向对象吗
  • javascript 类
  • 企业改制相关文件
  • 国有土地使用权出让和转让条例
  • 普通发票和增值税普票有啥区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设