2021年第一篇：后端开发人员也要会搭建VUE项目+antd

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

之所以写这篇博客，主要是巩固下vue搭建过程。

我们最终的目的是搭建一个类似于这种效果的后台管理系统。

2021年第一篇：后端开发人员也要会搭建VUE项目+antd

项目源码中有引入vue公交车及axios

npm install vue-bus

npm install axios --save

项目源码地址：https://download.csdn.net/download/wolongbb/14028534

下面内容比较琐碎，可以通过下载项目结合着看，也可以不看，直接使用项目。

1、查看本机环境是否可以使用vue脚手架

chenwolong@LAPTOP-P5GVS4UM MINGW64 /d/Project/Vue/vueTest
$ node -v
v12.18.4

chenwolong@LAPTOP-P5GVS4UM MINGW64 /d/Project/Vue/vueTest
$ npm -v
6.14.9

chenwolong@LAPTOP-P5GVS4UM MINGW64 /d/Project/Vue/vueTest
$ webpack -v

webpack-cli 4.2.0

webpack 5.9.0

chenwolong@LAPTOP-P5GVS4UM MINGW64 /d/Project/Vue/vueTest
$ vue -V
2.9.6

node -v 用于查看本机 node 环境，如果没有 node 环境，需要安装 nodejs，具体可参考：https://www.runoob.com/nodejs/nodejs-install-setup.html

那么如何安装 npm 呢？其实不用安装。

首先我们了解下，npm是什么东东？npm其实是Node.js的包管理工具（package manager）。

其实npm已经在Node.js安装的时候顺带安装好了。我们在命令提示符或者终端输入npm -v，应该看到上述类似的输出。

如果你想升级Npm，则可以使用如下指令安装

【升级npm（可选操作）】

npm install -g npm

webpack 是一个打包工具，如果你的电脑没有安装 webpack，则需要通过如下指令安装

【全局安装 webpack】

npm install webpack -g

【webpack 4.X 开始，需要安装 webpack-cli 依赖】

npm install webpack webpack-cli -g

vue -V 用于查看vue-cli脚手架的版本号，如果你的电脑没有安装，请执行如下指令安装

npm install -g vue-cli

安装好了环境依赖，我们就可以通过脚手架来搭建我们的项目了。

2、通过vue脚手架搭建快速搭建vue项目

执行如下指令：

vue init webpack vue-test

在执行过程中，vue会让用户做出相关的配置选择，如下：

chenwolong@LAPTOP-P5GVS4UM MINGW64 /d/Project/Vue/vueTest
$ vue init webpack vue-test

? Project name (vue-test)   --项目名称是否叫vue-test  直接回车，进行下一步
? Project name vue-test
? Project description (A Vue.js project)  --项目描述是否是 A Vue.js project  直接回车，进行下一步
? Project description A Vue.js project
? Author (chenwolong <chenwolong@163.com>) --作者  直接回车，进入下一步
? Author chenwolong <chenwolong@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) y  --是否安装Vue路由，输入 y   然后回车，进行下一步
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) y  --是否安装EsLine代码规范  输入 y   然后回车，进行下一步
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Set up unit tests (Y/n) n   --是都建立单元测试   输入 n  不安装单元测试，进入下一步
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n)  --是否安装e2e测试  输入 n 不安装 进入下一步，这时所有配置项执行完毕，脚手架开始下载项目模板
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "vue-test".


# Installing project dependencies ...

待上述指令执行完毕后，我们进入 d/Project/Vue/vueTest 目录，执行

npm run dev

2021年第一篇：后端开发人员也要会搭建VUE项目+antd

浏览器中输入：http://localhost:8082/

如果可以正常运行，说明你的vue项目搭建成功。那么下一步，我们就可以结合antd进行大刀阔斧的改革了。

3、vue结合antd

引入antd，执行如下指令

npm install ant-design-vue --save

执行完毕后，在项目main.js中全局引入antd，并在初始项目中的HelloWorld.vue 中引入一个button 按钮，测试下是否引入成功。

main.js变更如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue';/* 全局引入ant */
import 'ant-design-vue/dist/antd.css'; /* 全局引入ant样式文件*/

Vue.config.productionTip = false
Vue.use(Antd); /* 使用antd */
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

View Code