vue full stack project
1.0.0
作為一個切圖仔，這是我個人寫的第一個全棧項目:smile:，之前看了點node相關的視頻本來準備後端用原生node的，後來轉念一想，乾脆直接上框架吧，正好可以順便多學一個框架於是就現學現賣的上了koa2.x，感覺寫接口也不是那麼難啊:smirk:，前端就用的目前比較主流的vue + element，之所以想寫這麼一個項目是因為我之前從來沒從頭到尾的寫過一個完整的vue項目，都是接手的前人的代碼，寫這個項目正好可以鞏固一下之前學的技術。線上預覽地址：https://qietuzai.club/vue
前端：vue2 、 vuex 、 vue-router 、 axios 、 webpack 、 ES6 、 stylus 、 element-ui
後端：node 、koa2 、 mysql
項目內含有多個自主開發的組件，可直接應用於實際工作中。
├── build
├── config
├── node_modules
├── src ---核心代码目录
| ├── assets
| | ├── images ---静态资源存放目录
| ├── common ---字体图标存放目录
| ├── components ---组件存放目录
| ├── pages ---页面存放目录(可复用的则封装为组件，不可以的写为页面)
| ├── router ---路由
| ├── store ---vuex相关的文件
| ├── tools
| | ├── index.js ---封装了一些常用的函数
| ├── App.vue
| ├── main.js
├── .eslintrc ---自定义eslint配置文件
├── package.json
...... ---其他一些vue脚手架生成的文件就不表述了
├── api ---接口目录
| ├── spider ---爬虫相关的接口(开发中...)
| ├── upload ---上传文件相关的接口
| ├── user ---用户相关的接口
├── common
| ├── tool.js ---封装了一些常用的函数
| ├── mysql.js ---连接数据库的js(文件你们是看不到的，因为里面有线上数据库的账户密码，不过我给你们留了一个连接数据库示例哦，看在我这么贴心的份上还不快点个star:）)
| ├── mysqlDemo.js ---这就是连接数据库示例了(clone下来后，记得把文件名改为mysql.js哦), 2019年4月19日 16:16:59这个文件已经删除
├── upload ---文件上传的路径
├── app.js ---入口文件
├── test.sql ---数据库表的设计结构(里面数据全被截断了)
├── package.json
git clone https://github.com/xypecho/vue-full-stack-project.git
首先在cmd裡面執行一下mysql命令看看,
如果出現了以上的輸出則跳過該步驟，直接進入3.2.2 ,如果輸出了其他內容則意味著你正在使用的這台電腦並沒有安裝mysql，要先安裝mysql。
首先去google或者百度下載mysql 5.7最好是下載5.7版本的，因為之前我下載的最新版，各種連接不上...,一頓操作成功安裝之後再去cmd執行下mysql ，不出意外輸出的肯定是
這是因為沒有配置環境變量，把MySQL Server 5.7下的bin路徑添加到系統變量裡面。然後再去cmd執行mysql ，如果輸出3.2裡截圖的信息則說明安裝成功。
去google或者百度下載Navicat ，然後點擊連接數據庫，輸入圖片內內容(如果你的mysql密碼是123456的話)
連接成功後，右擊新建数据库，按照下圖中填寫
在新建的test數據庫上右擊選中运行SQL文件，選擇vue-full-stack-projectbackend下的test.sql ,至此完成了數據庫的連接
cd vue-full-stack-project
cd fontend
npm install // 首先安装前端的依赖包
npm run dev // 运行前端项目
cd ../ //回到根目录即vue-full-stack-project
cd backend
npm install // 安装后端的依赖包
export NODE_ENV=development; // 这个命令是为了区分不同的环境来读取不同的配置
node app.js // 运行后端项目
以上就是快速部署的全過程了，此項目適合node & vue新人學習，如果此項目對你產生幫助，請點個star哦:blush:
