windows10系统下vue开发环境搭建

windows10系统下vue开发环境搭建安装NodeJs下载地址:http://nodejs.cn/download/到官网下载自己系统对应的版本,按照推荐的方式默认安装,这里不再赘述。安装完成后,打卡powershell,执行命令node-v查询一下,检查是否正常安装。如果提示找不到node命令,添加node安装路径到系统环境变量,重启powershell,再试。如果你安装的是旧版本的npm,可以很容易得通过npm命令来升级。sudonpminstallnpm-g#linuxnpminstallnpm-g

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

安装NodeJs

下载地址:http://nodejs.cn/download/

到官网下载自己系统对应的版本,按照推荐的方式默认安装,这里不再赘述。安装完成后,打卡powershell,执行命令node -v查询一下,检查是否正常安装。
windows10系统下vue开发环境搭建
如果提示找不到node命令,添加node安装路径到系统环境变量,重启powershell,再试。
如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级。

sudo npm install npm -g  #linux
npm install npm -g  # windows

更多NodeJS教程可以参考以下资料:

  • 中文官网:http://nodejs.cn/api/
  • 菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html

安装 webpack

安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。
安装打包工具 webpack,-g 表示全局安装。

npm install webpack -g

更多webpack教程可以参考以下资料:

  • 菜鸟学堂:http://www.runoob.com/w3cnote/webpack-tutorial.html

安装vue-cli

安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。

npm install vue-cli -g

安装国内的镜像工具

因为 npm 使用的是国外中央仓库,有时候下载速度比较“感人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像,安装成功后 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Yarn

Yarn 是 Facebook 发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用 Yarn 替代 npm 。

如果你安装了node,就安装了npm,可以使用下面的命令来安装:

npm i yarn -g --verbose

npm官方源访问速度实在不敢恭维,建议使用之前切换为淘宝镜像,在yarn安装完毕之后执行如下指令:

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

到此为止我们就可以在项目中像使用npm一样使用yarn了。

使用 Yarn 跟 npm 差别不大,具体命令关系如下:

npm install  => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

创建 demo 项目

环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 test-ui。

//可能需要先安装cli-init
npm i -g @vue/cli-init
//然后再执行下面的命令
vue init webpack test-ui

一路根据提示输入项目信息,等待项目生成。
生成的目录为test-ui,如下
windows10系统下vue开发环境搭建

进入到项目根目录,按照指示执行命令,启动项目。

cd test-ui
npm run dev

windows10系统下vue开发环境搭建

浏览器访问对应地址,如这里的: http://localhost:8081,会出现 vue 的介绍页面。

windows10系统下vue开发环境搭建

打完收工。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/179679.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • c语言和python区别,python和c语言的区别是什么

    c语言和python区别,python和c语言的区别是什么Python 可以说是目前最火的语言之一了 人工智能的兴起让 Python 一夜之间变得家喻户晓 Python 号称目前最最简单易学的语言 现在有不少高校开始将 Python 作为大一新生的入门语言 本萌新也刚开始接触 Python 发现 Python 与其他语言确实有很大的区别 Python 是由 C 语言实现的 因此想把 Python 与 C 语言做一个简单的比较 1 语言类型 Python 是一种基于解释器的语言 解释器会逐行

    2025年6月24日
    5
  • 代码注册广播需要调用registerReceiver()方法_怎么把程序注册成服务

    代码注册广播需要调用registerReceiver()方法_怎么把程序注册成服务分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!                &

    2025年10月27日
    3
  • linux hexdump命令_hexdump用法

    linux hexdump命令_hexdump用法Linux中hexdump命令简介hexdump主要用来查看“二进制”文件的十六进制编码。*注意:它能够查看任何文件,不限于与二进制文件。*语法hexdump[选项][文件]…选项-nlength:格式化输出文件的前length个字节-C:输出规范的十六进制和ASCII码-b:单字节八进制显示-c:单字节字符显示-d:双字节十进制显示-o:双字节八进制显示-…

    2022年4月19日
    186
  • vs2010sp1安装未成功_c++2005怎么安装

    vs2010sp1安装未成功_c++2005怎么安装vs2005sp1安装失败是经常的事情。当发生这样的时候后,经过如下操作即可成功安装。第一步:1.单击“开始”,单击“运行”,键入secpol.msc,然后单击“确定”。2.双击“本地安全策略”。3.单击“软件限制策略”。注意:如果未列出软件限制,请右击“软件限制策略”,然后单击“新建策略”。4.在“对象类型”下,双击“强制”。5.单击“除本地管理员以外的所有…

    2022年10月6日
    2
  • 利用matlab画图(r语言能画出哪些图)

    clearallcloseallloadyi.txta=yi;b={‘北京”天津”石家庄”唐山”秦皇岛”太原”呼和浩特”包头’…’沈阳”大连”丹东”锦州”长春”吉林’…

    2022年4月17日
    42
  • pycharmpip安装_更改pip源地址

    pycharmpip安装_更改pip源地址Pycharm更换下载源更换原因在使用Pycharm的时候不免要下载许多的第三方库,特别是移植过来的项目更是一个文件的依赖包需要下载而Pycharm默认的官方源下载比较慢,我们可以通过配置来更换国内下载源靠谱的pip镜像源源清华源:https://pypi.tuna.tsinghua.edu.cn/simple豆瓣源:http://pypi.douban.com/simple/阿里源:http://mirrors.aliyun.com/pypi/simple/

    2022年8月25日
    13

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号