Vue环境安装、创建项目

Vue环境安装

下载安装 node.js

node.js 是一个 js 运行环境,Vue 工程需要建立在 node.js 的基础上。

npm 是 node.js 的包管理器,npm(node package manager)

通过 npm 完成一些环境的安装

https://nodejs.org/en/download/

Vue环境安装、创建项目

下载 LTS 版,长期维护的。

下载之后直接安装。

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

安装成功之后,如何检测是否成功?

node -v

配置环境变量

找到你的 node.js 安装路径,新建两个文件夹 “node_global”、“node_cache”

Vue环境安装、创建项目

在 CMD 中输⼊命令

npm config set prefix "D:\project\vue\nodeJS\node_global"
npm config set cache "D:\project\vue\nodeJS\node_cache"

在我的电脑—》高级环境配置–〉设置环境变量

NODE_PATH = D:\project\vue\nodeJS
PATH =%NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

npm 安装淘宝镜像

CMD 执行

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

淘宝镜像安装失败可以执行如下命令

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

npm 安装 Vue

CMD 执行

cnpm install -g @vue/cli
npm install -g @vue/cli

安装成功之后,如何检测是否成功?

vue -V

Vue 安装失败原因

1、检查环境变量,nodejs 的根目录也要配置到 path 中

2、执行命令

npm install -g vue
npm install -g @vue/cli

3、npm config list 查看一下npm 的配置信息,下图

Vue环境安装、创建项目

然后找到这个红色线里面的路径,看看有没有vue.cmd的文件,添加到环境变量中

或者直接进入改路径,运行 vue -V/vue ui 进行操作。

4、如果 vue ui 报错,在环境变量 path 中添加

C:\Windows\System32

Vue环境安装、创建项目

在线创建工程

vue ui

将创建好的工程导入 IDEA,如果启动报错。

Vue环境安装、创建项目

修改 IDEA 配置,重启 IDEA 即可。

Vue环境安装、创建项目

创建Vue工程

1、打开终端,命令行

sudo vue ui

打开UI界面

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

Vue环境安装、创建项目

上一篇:【JS学习】 npm 命令


下一篇:day12-实参高阶函数作业