本文已参与「新人创作礼」活动，一起开启掘金创作之路。
从0创建vue项目
方式一：使用vue-cli构建vue项目
- 目前存在很多vue创建的基础框架，但为了学习，开始从0搭建一个，并最终结合spring boot搭建的后端，采用前后端分离模式，实现生成二维码功能。
- 在Windows命令提示符窗口中输入 vue --version，如果提示”‘vue’不是内部或外部命令，也不是可运行的程序“，这时需要使用如下命令安装 vue-cli
npm install -g @vue/cli
- 安装完毕输入“vue --version”，可以查看安装的版本，接下来可以使用vue-cli创建一个项目
- 创建名为“hello-world-ui”的vue项目
vue create hello-world-ui
- “Use registry.npmmirror.com for faster installation?”(Y/n) "使用npm镜像快速安装"？ 选择 Y
- “Please pick a preset:(Use arrow keys)”请选择一个预设，使用箭头键，本次选择([Vue 2] babel,eslint)，等待安装
- 安装完毕后，使用vscode打开，目录结构如下：
|-hello-world-ui
|-.git
|-node_modules
|-public
|-src
|-.gitignore
|-babel.config.js
|-jsconfig.json
|-package-lock.json
|-package.json
|-README.md
|-vue.config.js
- 如果不使用git进行版本管理，可以删除.git目录和.gitignore文件
- 使用命令行 npm run serve 可以启动项目，生成 http://localhost:8080/ 地址，浏览器输入即可访问
方式二：构建基于webpack的vue项目
- 安装完vue环境后（包括vue-cli）
- 使用 vue init webpack project-name 命令初始化webpack项目
- 会有如下的几个配置项
Project name 项目名称
Project description 项目描述
Author 作者
Vue build 选择standalone运行和编译
Install vue-router 安装vue-router选yes
Use ESLint to lint your code 代码语法检查 选yes可以检查代码格式
Pick an ESLint preset 语法检查模板 使用 Standard
Set up unit tests 单元测试 选No
Setup e2e tests with Nightwatch 测试e2e 选择No
Should we run npm install for you after the project has been created?(recommended) 使用 npm 安装项目依赖
- 构建完成后 控制台输入 “npm run dev”即可运行项目
- 安装 elementui 命令：npm i element-ui -S
- 安装axios，并对其进行封装，向后端发送请求
- spring boot后端会写一篇文章，最后会把源码上传到GitHub上面，并公布地址。
