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

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

  • 个人获得的专利有哪些
  • 银行借款的实际利率=名义年利息/实际贷款额*100%
  • 小规模纳税人个税是月报还是季报
  • 其他货币资金的科目编码
  • 税控盘交服务费
  • 小规模残疾人交多少税收
  • 微商怎么收税
  • 机动车发票申请流程
  • 大额虚开发票做转出税款入什么会计科目?
  • 无发票材料可以入材料账吗
  • 汽车固定资产清理账务处理
  • 已经入库的商品出库了要怎么做会计分录
  • 报废 库存商品
  • 交通补贴可以抵扣个税吗
  • 发票上的税额和报税的数不一样,按照哪个报
  • 员工出差报销制度
  • 不动产取得以什么为要件
  • 用友软件以前年度损益调整报表勾稽关系不对
  • 免税销售额需要价税分离吗
  • 1697509110
  • 固定资产折旧金额影响因素
  • 房产契税怎样交费
  • php如何解决异常处理
  • 其他生活服务业增值税税率
  • 营改增后工程税收怎么计算
  • 税控设备抵减增值税会计处理
  • thinkphp5数据库操作
  • php header Content-Type类型小结
  • 机器学习-10 聚类算法
  • rk3566 rk3288
  • 编译原理第三版
  • 微信转账怎么处理退回去
  • 长投转可供
  • 如何在织梦中设置图片加文字
  • jsp页面构成
  • 采购国产设备退税公告
  • 开了红字发票申请还要做进项税转出吗
  • 小规模纳税人附加税会计分录
  • 分公司发生的业务,开票给总公司
  • 个税申报的本期收入填什么
  • 预付一年的技术服务费
  • 营改增后工程分包财务
  • 公司股票买卖账务处理
  • mysql深度解析
  • html友情链接模板
  • discuz管理中心登陆
  • 投资公司投资收益要交增值税吗
  • 如何网上填报个人所得税
  • 金税四期主要监控的内容
  • 银行电子承兑到期了怎么兑现操作
  • 小规模纳税人企业所得税2023
  • 退去年的销售账务如何处理
  • 资产负债有哪些科目
  • 发票 认证抵扣
  • 生产加工企业辅导资料
  • 公司送客户的礼品账务处理
  • 退税政策调整
  • 浅谈幼儿良好行为的培养论文
  • ubuntu21 安装
  • ubuntu怎么开启root
  • ubuntu下载net-tools
  • winlogon是什么意思
  • windows xp的控制面板
  • s3tray2.exe - s3tray2是什么进程 有什么用
  • perfom.exe
  • win10系统的文件夹选项在哪里
  • win10开始菜单怎么打开
  • opengl绘图
  • 在github开源的项目有假的吗
  • Setver、Share、Subst命令的使用方法
  • django模块详解
  • js中的三种弹出式消息提醒的命令是什么
  • macos安装过程
  • vue购物车功能
  • js小数计算精度问题
  • 深入探讨英文
  • jquery插件大全
  • 三方协议暂不支持缴款
  • 家长进校园给孩子讲法律课
  • 潍坊市的职工医保多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设