前言

讲了这么多vue相关知识，还没一篇讲到工程搭建，今天就给大家带来vue工程的搭建

一、环境

  • IDEA
  • Node.js

二、初始化搭建webpack

2.1、目录创建

找一个目录，建造一个文件夹，idea的话就创建模块
image.png

2.2、安装vue-cli（已安装请忽视）

▼▼▼接下来就是比较关键的步骤了,敲黑板.....▼▼▼
关于 vue-cli 的安装请参考百度。

首先利用淘宝镜像安装cnpm

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

然后全局安装 vue-cli

cnpm install -g vue-cli

2.3、初始化webpack 模板

vue init webpack

提示 npm i -g @vue/cli-init 就输入
image.png

再一次输入第一个命令。另外：请在项目根目录输入命令，最后一个vue就是项目名称

image.png

image.png

2.4、安装依赖、启动

vue install
npm run dev

image.png

三、其他配置

3.1、端口和反向代理跳转

image.png

四、遇到报错

4.1、找不到vue命令

那是你没安装vue/cli命令

image.png