搭建Vue开发环境并运行
前端到js就没深入学习过,突然想要用Vue来部署一些小页面的时候,就记录一下部署Vue的环境以及运行。
配置node.js
Vue的运行环境
node.js的下载安装就不多描述了官方下载地址,下载后安装就可(自己注意node的安装路径)
找到node.js的安装路径
先找到node.js的安装路径新建node_cache 和 node_global两个文件(需要配置到环境变量中)
cache用来存放缓存,global用来全局存放以后npm命令下载的模块。(配置这俩目录便于后期管理)
配置node以及这俩目录的环境变量。系统:win11
建议以下cmd都以管理员模式运行
- 右键此电脑选中属性 --> 找到高级系统设置 --> 选中环境变量 --> 新加NODE_HOME
2.找打Path 选择新建三个路径
%NODE_HOME% , %NODE_HOME%\node_cache , %NODE_HOME%\node_global
- 设置缓存以及模块安装路径(注意要以管理员模式运行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
第二种: 手动创建
-
新建一个vue-demo文件夹
-
在Dos窗口中cd到该目录然后输入:
vue init webpack vue-demo
-
创建完成之后输入
cnpm install
- 最后在终端中输入
cnpm run dev
在浏览器访问http://localhost:8080/
期间遇到的错误
-
使用vue ui 需要在管理员模式下执行
cnpm install -g @vue/cli
-
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这里会出错,选第三个选项
-
在项目中运行cnpm install 出错
-
这是因为windows禁止在命令行运行脚本
-