教你如何0基础运行vue项目

一、环境搭建
1、软件安装: Node.js > npm > vue.js

2、Node.js的安装。
(1) 先从官网下载node.js，官网地址：https://nodejs.org/en/，除了更改安装路径，其他的直接默认“下一步”就可以。

(2) 安装完成后， cmd窗口，在窗口中输入命令： node -v 出现nodejs的版本号则安装成功（注意是新开一个cmd窗口）。

(3) 在窗口中输入命令 npm -v 出现npm的版本号，可验证nodejs是否内置了npm(一般内置)。

(4) 窗口中输入path，查看是否有nodejs的环境变量，如果有，说明nodejs已自动添加了path路径，若是没有需要手动的去添加。

(5) 添加方法，以win10为例。右击“此电脑”，“属性” -> “高级属性” -> “高级” 标签页 -> “环境变量” ：点击"path" -> 编辑->弹出框中点击空白行->浏览->选择nodejs安装的目录->确定->确定->确定->关闭属性窗口；

教你如何0基础运行vue项目

3、配置npm
(1) 在nodejs的安装目录下新建两个文件夹，npm_gobal和npm_cache。分别用于npm的全局路径和缓存路径。

(2) 设置npm的全局路径和缓存路径的环境变量：右击“此电脑”，“属性” -> “高级属性” -> “高级” 标签页 -> “环境变量” ：点击"path" -> 编辑->点击弹出框中点击空白行->浏览->选择新建的npm_gobal文件夹->确定
->点击弹出框中点击空白行->浏览->选择新建的npm_cache文件夹->确定->确定->关闭属性窗口

(3) 运行cmd, 用命令配置npm。
① 配置npm的全局路径： npm config set prefix “D:\Program Files\nodejs\npm_global”。

② 配置npm的缓存路径：npm config set cache “D:\Program Files\nodejs\npm_cache”。

③ 更换镜像站为国内的淘宝镜像站：npm config set registry=“http://registry.npm.taobao.org” 。

④ 由此，npm已配置好，可通过命令： npm config ls 查看npm的所有配置。

教你如何0基础运行vue项目

4、安装vue
(1) 在cmd窗口输入 npm install -g vue-cli 下载完成后，输入vue -V 或者vue --version查看版本.

(2) 如果报rollbackFailedOptional verb npm-session 的错误，则需要设置npm的代理服务器，百度一下。
至此，vue项目的环境搭建基本完成。

二、项目运行

1、下载webstrom或者vscode开发工具

2、将vue项目用vscode打开。（以vscode为例）

3、运行步骤，git pull 拉取分支下的最新代码，假如项目有多个项目组成，cd到可以运行的项目中，然后加载依赖 npm install。

4、依赖加载完，执行 npm run dev.

5、注意问题，若是报出“npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。”的问题，处理方式一，以管理员身份运行vscode。处理方式二，查看npm环境变量配置。

6、注意问题，npm run serve时报错 no such file or directory,open ‘…\package.json’。错误原因：是自己在vue cli3初始化项目后，直接在刚才创建的项目名称的外部文件夹运行了npm run serve这段代码，所以才找不到package.json，应该要进入刚才的项目里运行代码。进入项目：cd xxxxx

ps：可能会遇到其他各种各样的问题，比如vue.js的安装失败，npm install的失败等等。具体情况可能要自行百度了.

教你如何0基础运行vue项目

相关推荐