搭建Vue开发环境并运行

搭建Vue开发环境并运行

前端到js就没深入学习过，突然想要用Vue来部署一些小页面的时候，就记录一下部署Vue的环境以及运行。

配置node.js

Vue的运行环境

node.js的下载安装就不多描述了官方下载地址，下载后安装就可（自己注意node的安装路径）

找到node.js的安装路径

先找到node.js的安装路径新建node_cache 和 node_global两个文件（需要配置到环境变量中）

cache用来存放缓存，global用来全局存放以后npm命令下载的模块。(配置这俩目录便于后期管理)

配置node以及这俩目录的环境变量。系统：win11

​ 建议以下cmd都以管理员模式运行

1. 右键此电脑选中属性 --> 找到高级系统设置 --> 选中环境变量 --> 新加NODE_HOME

2.找打Path 选择新建三个路径

​ %NODE_HOME% , %NODE_HOME%\node_cache , %NODE_HOME%\node_global

3. 设置缓存以及模块安装路径(注意要以管理员模式运行CMD窗口)

   cnpm config set prefix "node_global地址"
   cnpm config set cache "node_cache地址"
   

下载cnpm并配置淘宝镜像

一般情况下直接npm下载模块国内会卡,所以会通过下载cnpm并配置淘宝镜像来加快下载速度(如果npm速度很快或者直接将npm的镜像换为淘宝可不下载cnpm).

在CMD窗口输入下列命令

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 配置淘宝镜像
cnpm config set registry https://registry.npm.taobao.org
# 查看镜像地址
cnpm config get registry

还原官方镜像

cnpm config set registry https://registry.npmjs.org/

安装Vue

全局安装vue

cnpm install vue -g

安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g -i

#带有VUE UI:Vue的可视化界面
cnpm install -g @vue/cli

安装cli-init用于快速创建Vue项目

cnpm install -g @vue/cli-init

测试 记得新开一个cmd窗口

vue -V

Vue项目

第一种:通过VUE UI在浏览器页面创建

按Win + R :输入vue ui

在CMD窗口: 输入vue ui

第二种: 手动创建

1. 新建一个vue-demo文件夹

2. 在Dos窗口中cd到该目录然后输入:

   vue init webpack vue-demo
   

3. 创建完成之后输入

   cnpm install
   

4. 最后在终端中输入 cnpm run dev 在浏览器访问http://localhost:8080/

期间遇到的错误

1. 使用vue ui 需要在管理员模式下执行cnpm install -g @vue/cli

2. vue init webpack vue-demo 出现错误

   

   说明:

   • 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 回车；
   • should wu run “npm install” 这是项目搭建之后自动运行npm i,如果是使用的cnpm这里会出错,选第三个选项

3. 在项目中运行cnpm install 出错

   

   • 这是因为windows禁止在命令行运行脚本

     解决