入门前端 Vue Cli3 + View UI 4

home 编辑时间 2020/10/19

![](/api/file/getImage?fileId=5f8d467016199b501c0157fa)

## 前言

Vue Cli 在下入门了至少5次，最后不是VUE又更新了，学的东西跟不上了，就是太久没用就忘了。
所以反正之前学的不深，本篇既是温习，也是入门，再从头再来一遍

## 开发环境

**安装 NVM 和 NODEJS**

先安装nvm来控制node版本
然后选择安装12.18.x的版本的nodejs
这部分留个地址，参考这个教程即可
[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)
[https://www.runoob.com/w3cnote/nvm-manager-node-versions.html](https://www.runoob.com/w3cnote/nvm-manager-node-versions.html)

```shell
# 使用命令查看当前node版本
node -v

# 返回版本为v12.18.x 即安装正确
v12.18.4
```

**安装 CNPM YARM VITE**

到这里首先已经有nodejs环境了，也有npm了

更新 NPM
```shell
# 更新 NPM
npm install -g npm
```

安装 CNPM [https://developer.aliyun.com/mirror/NPM](https://developer.aliyun.com/mirror/NPM)
```shell
# 安装 CNPM
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

安装 YARN
```shell
# 安装 YARN
npm install -g yarn
```

安装 VITE
```shell
# 安装 VITE
npm install -g create-vite-app
```

上述步骤都使用NPM会速度慢，可以先安装CNPM，然后后续都用 CNPM 开头来执行，以加快速度，后期的开发建议使用 VITE 创建项目，YARN 来管理依赖

## 创建项目

这里用 VITE 可以大幅提高创建的效率
一共就3步

```shell
# 首先要确定已安装 create-vite-app
# 这里提前cd 到你放项目的目录中
create-vite-app project-name

# 然后会看到创建成功的提示和下一步执行建议
Scaffolding project in C:\workspace\vueProject\project-name...

Done. Now run:

cd project-name
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)
  
  
# 到这里就可以直接用webstorm打开，进行后续操作了，也可以在控制台中继续安装依赖，命令如下
yarn install

# 如果需要查看是否成功，可以启动一下试试
yarn dev

# 启动以后会看到如下提示
$ vite
vite v1.0.0-rc.4
[vite] Optimizable dependencies detected:
vue

Dev server running at:
  > Network:  http://192.168.56.1:3000/
  > Network:  http://192.168.99.1:3000/
  > Network:  http://192.168.8.127:3000/
  > Local:    http://localhost:3000/
```

至此项目创建完成
打开 [http://localhost:3000/](http://localhost:3000/)可以看到初始化的VUE 3.x界面
![](/api/file/getImage?fileId=5f8d4b5816199b501c015805)

至此创建完成，可以关闭控制台窗口，也可以Ctrl + C停止程序执行

## 使用 WebStorm 打开

启动 `WebStorm` -> `open`
找到刚才创建的项目根目录
这里如果刚才没执行过 `yarn install` 的话，会弹出提示，点击执行即可

![](/api/file/getImage?fileId=5f8d509716199b501c015818)

右击 `package.json` -> `Show npm Scripts`
![](/api/file/getImage?fileId=5f8d50cb16199b501c015819)

会显示出一个npm脚本窗口
包含 
`dev` 运行调试模式
`build` 打包导出项目

例如双击 `dev`
既可以执行项目，再访问[http://localhost:3000/](http://localhost:3000/)就可以看到刚才的页面

另外在 settings 中可以查看到目前已安装的node工具的列表以及版本信息
在这里可以双击调整版本信息等
![](/api/file/getImage?fileId=5f8d525c16199b501c01581b)

## 引入 VIEW UI

参考官网文档
[http://v1.iviewui.com/docs/guide/install](http://v1.iviewui.com/docs/guide/install)

```shell
yarn add view-design

# 顺便把vue-router和vuex一起引入了
yarn add vue-router
yarn add vuex
```

这里和iviewui的官网文档会有一丢丢不同
vue cli 3.x 配置文件的写法稍微有点不同了

**例如**

`vue cli 3.x ` -> `main.js`
```nodejs
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

```

等价于

`vue cli 2.x ` -> `main.js`
```nodejs
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app")

```

**调整 `main.js`**

送人玫瑰,手留余香