一、Node.js and vue-cli安装与配置

1.安装node.js

在这里我安装的是最新的Node.js --12.10.0

安装包 node.js安装包 提取码：fskp

直接双击运行即可，安装完毕之后需要配置npm的全局变量

右键我的电脑->属性->高级系统设置->环境变量->新建 变量名：NODE_PATH；变量值：x:xxxxnode_modulesnpmnode_modules->一直点击确定即可

2.搭建vue的脚手架工具

键盘按住win+R->输入cmd->回车->输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像（下载速度会快点，不想安装也可以不安装）->回车（等待安装成功）

键盘按住win+R->输入cmd->回车->输入：npm install --global vue-cli (or cnpm install --global vue-cli) ->回车（等待安装成功）

3.创建vue项目（必须有一个项目文件夹并在dos窗口cd进这个文件夹）

创建vue项目有两种创建方式：

3.1使用webpack创建

键盘按住win+R->输入cmd->回车->cd进项目文件夹->输入：vue init webpack vue-demo->回车（vue-demo为项目名）

项目配置如图：

创建完成之后->输入：cd vue-demo->回车

（如果项目无依赖，即项目文件夹中无 node_modules这个依赖文件夹，需要运行npm install / cnpm install）

npm run dev 启动项目。

3.2使用 webpack-simple 创建项目

键盘按住win+R->输入cmd->回车->cd进项目文件夹->输入：vue init webpack-simple vue-demo2 ->回车（vue-demo2为项目名）

->cd vue-demo2

->npm install / cnpm install(必须运行，因为项目无依赖)

npm run dev 启动项目。

二、vue-cli3安装与配置

如果有安装过 vue-cli2或更早版本的需要卸载 vue-cli；vue-cli3需要node.js版本8.6以上才支持

卸载vue-cli ：npm uninstall vue-cli -g / yarn global remove vue-cli

安装vue-cli3: npm install -g @vue/cli 或 yarn global add @vue/cli

安装vue-cli3有可能出现code:EPERM;errno:-4048 的错误，这个时候可以在dos中输入指令：npm cache clean --force

再次安装就没问题了

检查cli版本是否正确（3.x）

vue --version

创建项目：（必须有一个项目文件夹并在dos窗口cd进这个文件夹）

创建项目指令：vue create hello-word->回车->选择默认->回车

运行项目指令： npm run serve

编译项目：npm run build

本文作者：黄文勇
本文链接：https://www.3dcw.cn/index.php/archives/359/
最后修改时间：2020-05-29 17:45:31
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！