安装NodeJs
下载地址：http://nodejs.cn/download/
到官网下载自己系统对应的版本，按照推荐的方式默认安装，这里不再赘述。安装完成后，打卡powershell,执行命令node -v查询一下，检查是否正常安装。
如果提示找不到node命令，添加node安装路径到系统环境变量，重启powershell，再试。 如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级。
代码语言：javascript复制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 表示全局安装。
代码语言：javascript复制npm install webpack -g更多webpack教程可以参考以下资料：
- 菜鸟学堂：http://www.runoob.com/w3cnote/webpack-tutorial.html
安装vue-cli
安装 vue 脚手架项目初始化工具 vue-cli，-g 表示全局安装。
代码语言：javascript复制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，可以使用下面的命令来安装：
代码语言：javascript复制npm i yarn -g --verbosenpm官方源访问速度实在不敢恭维，建议使用之前切换为淘宝镜像，在yarn安装完毕之后执行如下指令：
代码语言：javascript复制yarn config set registry https://registry.npm.taobao.org到此为止我们就可以在项目中像使用npm一样使用yarn了。
使用 Yarn 跟 npm 差别不大，具体命令关系如下：
代码语言：javascript复制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。
代码语言：javascript复制//可能需要先安装cli-init
npm i -g @vue/cli-init
//然后再执行下面的命令
vue init webpack test-ui一路根据提示输入项目信息，等待项目生成。
生成的目录为test-ui,如下
进入到项目根目录，按照指示执行命令，启动项目。
代码语言：javascript复制cd test-ui
npm run dev
浏览器访问对应地址，如这里的: http://localhost:8081，会出现 vue 的介绍页面。
打完收工。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/179679.html原文链接：https://javaforall.cn
