windows下搭建vue项目环境加创建项目超详细小白步骤!

24 篇文章 0 订阅
4 篇文章 0 订阅

1. 第一步安装node.js
官网:https://nodejs.org/zh-cn/
在这里插入图片描述

2.下载好按步骤安装“推荐都默认”
在这里插入图片描述
3.点开运行调用出cdm
在这里插入图片描述
输入node -v npm -v 出现版本号就是安装完成了
在这里插入图片描述
注意不要乱升级npm 以免造成问题 下面是官方对应的版本,安装node.js自带npm
环境变量配置

npm config ls

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

https://nodejs.org/zh-cn/download/releases/

为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/
输入:

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

即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
在这里插入图片描述 检查是否安装成功:
在这里插入图片描述

4.安装webpack“https://webpack.docschina.org/”
全局安装 webpack 命令:

npm install -g webpack

安装特定版本 webpack(比如 3.x.x):

npm install -g webpack@3

看 webpack 是否安装成功(下面命令都可以):

webpack -v
webpack --version

在这里插入图片描述
5.安装vue脚手架

npm install --global vue-cli

在这里插入图片描述
输入vue -V查看版本,有版本号就成功了。
在这里插入图片描述
6.在要搭建项目目录下输入命令(用cd切换)

进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名
在这里插入图片描述
说明:

Vue build ==> 打包方式,回车即可;

Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

7.进入项目:cd vue-demo,安装依赖
 在这里插入图片描述
   安装成功后,项目文件夹中会多出一个目录: node_modules

在这里插入图片描述
8、npm run dev,启动项目

项目启动成功:
  
    在这里插入图片描述
9.另一个配置vue项目方法
运行以下命令来创建一个新项目:

vue create hello-world

警告
如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过,如果你仍想使用 vue create hello-world,则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue=‘winpty vue.cmd’ 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
在这里插入图片描述
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
在这里插入图片描述
如果你决定手动选择特性,在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。我们会在下一个章节讨论 preset 和插件。

~/.vuerc
被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项,可以编辑这个文件。
在项目创建的过程中,你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

vue create --help
用法:create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项:

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

Vue CLI 4.x 版本后支持使用图形化界面配置
你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。
在这里插入图片描述
vue笔记

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淡忘_cx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值