基于Vue+Vuex+Vue-Router+Axios+Mint-ui+Node+Express+MySQL+Element-ui的移動端項目

第一步：安裝Node

1吮廉、打開NodeJS的官網逾礁，下載和自己系統相配的NodeJS的安裝程序说铃，包括32位還是64位一定要選擇好访惜，否則會出現安裝問題。

下載地址：https://nodejs.org/en/download/

我選擇的是Window版本64位的安裝程序腻扇，也有MAC平臺的安裝程序债热。

? ? 下載完成，如圖:

2幼苛、接下來就是安裝了窒篱，安裝很簡單，直接下一步下一步就可以舶沿，但是我也把流程記錄下來墙杯，給第一次看本教程的人有一個大概的了解。

? 雙擊安裝文件括荡，如圖：

3高镐、點擊下一步，選擇同意協議畸冲，否則無法繼續(xù)安裝避消。如圖：

4、這一步選擇安裝的目錄召夹，可以使用默認目錄【C:\Program Files\nodejs\】，也可以根據需要改變目錄恕沫，我選擇安裝在D盤：

6监憎、最后一步就是安裝和完成了。如圖：

完成效果：

安裝完成后婶溯，在cmd窗口下執(zhí)行 node -v 命令鲸阔，看到版本信息，則說明安裝成功：

參考鏈接：https://www.cnblogs.com/zhouyu2017/p/6485265.html

第二步：配置淘寶npm鏡像

由于需要通過npm下載各種模塊迄委，默認npm是從國處服務器下載褐筛，對于網絡條件一般的用戶可能很難下載成功，所以需要配置成淘寶的鏡像叙身。

打開命令行渔扎，輸入：npm config set registry https://registry.npm.taobao.org

以后下載模塊會自動從淘寶地址進行下載。

第三步：安裝webpack

打開命令行信轿，輸入npm install webpack -g晃痴。安裝完成后輸入webpack -v，如果顯示版本號财忽，則說明安裝成功倘核。

第四步：安裝vue-cli

打開命令行，輸入npm install vue-cli -g即彪。安裝完成后輸入vue -V查看版本事情紧唱，現在應該是三點幾的版本了，不過我的項目是用的2.9.6版本。

第五步：通過vue-cli初始化項目

打開命令行漏益，進入指定的目錄蛹锰，輸入vue init webpack 項目名，確認創(chuàng)建項目后遭庶，后續(xù)還需輸入一下項目名稱宁仔、項目描述、作者峦睡、打包方式翎苫、是否使用ESLint規(guī)范代碼等等，詳見上圖榨了。安裝順利執(zhí)行后會煎谍，生成如下文件目錄。

如果不是很習慣ESLint規(guī)范代碼龙屉，建議新手選擇No呐粘，如果你的編輯器安裝了ESLint插件，但你的代碼寫的又不規(guī)范转捕，所以會一直報錯作岖，盡管不影響項目的運行，但還是會一直出現討厭的紅色五芝。

前面簡單的介紹了怎么搭建Vue項目以及Node環(huán)境痘儡，下面切入正題：

先說一下三零九在線藥品銷售系統? ? 前臺的項目配置信息，跟上圖所示的其實也差不多吧枢步，只是文件夾下的沒再依次展示了沉删。

|-- build // 項目構建(webpack)相關代碼

| |-- build.js // 生產環(huán)境構建代碼

| |-- check-version.js // 檢查node、npm等版本

| |-- utils.js // 構建工具相關

| |-- webpack.base.conf.js // webpack基礎配置

| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置

| |-- webpack.prod.conf.js // webpack生產環(huán)境配置

|-- config // 項目開發(fā)環(huán)境配置

| |-- dev.env.js // 開發(fā)環(huán)境變量

| |-- index.js // 項目一些配置變量

| |-- prod.env.js // 生產環(huán)境變量

|-- src // 源碼目錄

| |-- assets // 圖片樣式文件

| |-- components // vue公共組件

| |-- pages // 頁面 (里面有很多頁面醉途，就不依次詳細展開了)

| |-- router // 路由文件

| |-- store // vuex的狀態(tài)管理

| |-- util // 公共js文件

| |-- App.vue // 頁面入口文件

| |-- main.js // 程序入口文件矾瑰，加載各種公共組件

|-- static // 靜態(tài)文件，比如一些圖片隘擎，json數據等

|-- .babelrc // ES6語法編譯配置

|-- .editorconfig // 定義代碼格式

|-- .gitignore // git上傳需要忽略的文件格式

|-- README.md // 項目說明

|-- favicon.ico // logo圖標

|-- index.html // 入口頁面

|-- package.json // 項目基本信息

他主要用到的技術有（Vue+Vuex+Vue-router+Axios+Mint-ui+Element-ui+Webpack）等等殴穴。

還是先看一下Mobile端的演示效果吧：

只列出了部分功能，像九九包郵嵌屎，健康資訊推正，當季必備，關于我們等等沒有列出來宝惰。像購物車動畫植榕，同步刷新購物車中商品數量，以及實時刷新個人中心各個訂單狀態(tài)的數量尼夺。其中彈出框主要是用的Mint-ui中的Message和餓了么組件的MessqgeBox和alert框尊残。

入口文件main.js部分代碼：

其中基于ES6中的Promise的HTTP庫的Axios炒瘸，關于它的響應攔截請求,以及各種請求方法? 請查看它的官方社區(qū)Api中文文檔，地址如下：https://www.kancloud.cn/yunye/axios/234845

再來看一下三零九在線藥品銷售系統? ? 后臺的項目配置信息寝衫，其實跟前臺的目錄結構差不多顷扩，畢竟都是用Vue-cli腳手架生成的。

后臺管理系統主要用到Vue+Vuex+Vue-router+AxiosElement-ui+Webpack技術等等慰毅。

|-- build // 項目構建(webpack)相關代碼

| |-- build.js // 生產環(huán)境構建代碼

| |-- check-version.js // 檢查node隘截、npm等版本

| |-- utils.js // 構建工具相關

| |-- webpack.base.conf.js // webpack基礎配置

| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置

| |-- webpack.prod.conf.js // webpack生產環(huán)境配置

|-- config // 項目開發(fā)環(huán)境配置

| |-- dev.env.js // 開發(fā)環(huán)境變量

| |-- index.js // 項目一些配置變量

| |-- prod.env.js // 生產環(huán)境變量

|-- src // 源碼目錄

| |-- assets // 圖片樣式文件

| |-- components // vue公共組件

| |-- pages // 頁面 (里面有很多頁面，就不依次詳細展開了)

| |-- router // 路由文件

| |-- store // vuex的狀態(tài)管理

| |-- util // 公共js文件

| |-- App.vue // 頁面入口文件

| |-- main.js // 程序入口文件汹胃，加載各種公共組件

|-- static // 靜態(tài)文件婶芭，比如一些圖片，json數據等

|-- .babelrc // ES6語法編譯配置

|-- .editorconfig // 定義代碼格式

|-- .gitignore // git上傳需要忽略的文件格式

|-- README.md // 項目說明

|-- favicon.ico // logo圖標

|-- index.html // 入口頁面

|-- package.json // 項目基本信息

前后臺都有用到? 緩解首屏加載時間過長的一個過度頁面（可以這么說吧着饥，其實就是怕一次性加載的數據過大導致白屏時間太長）犀农，效果如下：

只是在index.html根頁面下加了如下代碼：

? ? ? ? ? ? ? 三零九笙塵藥膳坊后臺管理系統? ? ? ? ? ? html,

? ? body,

? ? #app {

? ? ? height: 100%;

? ? ? margin: 0px;

? ? ? padding: 0px;

? ? }

? ? .chromeframe {

? ? ? margin: 0.2em0;

? ? ? background: #ccc;

? ? ? color: #000;

? ? ? padding: 0.2em0;

? ? }

? ? #loader-wrapper {

? ? ? position: fixed;

? ? ? top: 0;

? ? ? left: 0;

? ? ? width: 100%;

? ? ? height: 100%;

? ? ? z-index:999999;

? ? }

? ? #loader {

? ? ? display: block;

? ? ? position: relative;

? ? ? left: 50%;

? ? ? top: 50%;

? ? ? width: 150px;

? ? ? height: 150px;

? ? ? margin: -75px00-75px;

? ? ? border-radius:50%;

? ? ? border: 3px solid transparent;

? ? ? /* COLOR 1 */? ? ? border-top-color: #FFF;

? ? ? -webkit-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-moz-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin 2s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */? ? ? animation: spin 2s linear infinite;

? ? ? /* Chrome, Firefox 16+, IE 10+, Opera */? ? ? z-index:1001;

? ? }

? ? #loader:before {

? ? ? content: "";

? ? ? position: absolute;

? ? ? top: 5px;

? ? ? left: 5px;

? ? ? right: 5px;

? ? ? bottom: 5px;

? ? ? border-radius:50%;

? ? ? border: 3px solid transparent;

? ? ? /* COLOR 2 */? ? ? border-top-color: #FFF;

? ? ? -webkit-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-moz-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin 3s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */? ? ? animation: spin 3s linear infinite;

? ? ? /* Chrome, Firefox 16+, IE 10+, Opera */? ? }

? ? #loader:after {

? ? ? content: "";

? ? ? position: absolute;

? ? ? top: 15px;

? ? ? left: 15px;

? ? ? right: 15px;

? ? ? bottom: 15px;

? ? ? border-radius:50%;

? ? ? border: 3px solid transparent;

? ? ? border-top-color: #FFF;

? ? ? /* COLOR 3 */-moz-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */-webkit-animation: spin1.5s linear infinite;

? ? ? /* Chrome, Opera 15+, Safari 5+ */? ? ? animation: spin 1.5s linear infinite;

? ? ? /* Chrome, Firefox 16+, IE 10+, Opera */? ? }

? ? @-webkit-keyframes spin {

? ? ? 0% {

? ? ? ? -webkit-transform: rotate(0deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(0deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(0deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? ? 100% {

? ? ? ? -webkit-transform: rotate(360deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(360deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? }

? ? @keyframes spin {

? ? ? 0% {

? ? ? ? -webkit-transform: rotate(0deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(0deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(0deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? ? 100% {

? ? ? ? -webkit-transform: rotate(360deg);

? ? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);

? ? ? ? /* IE 9 */? ? ? ? transform: rotate(360deg);

? ? ? ? /* Firefox 16+, IE 10+, Opera */? ? ? }

? ? }

? ? #loader-wrapper .loader-section {

? ? ? position: fixed;

? ? ? top: 0;

? ? ? width: 51%;

? ? ? height: 100%;

? ? ? background: #7171C6;

? ? ? /* Old browsers */? ? ? z-index:1000;

? ? ? -webkit-transform: translateX(0);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(0);

? ? ? /* IE 9 */? ? ? transform: translateX(0);

? ? ? /* Firefox 16+, IE 10+, Opera */? ? }

? ? #loader-wrapper .loader-section.section-left {

? ? ? left: 0;

? ? }

? ? #loader-wrapper .loader-section.section-right {

? ? ? right: 0;

? ? }

? ? /* Loaded */? ? .loaded #loader-wrapper .loader-section.section-left {

? ? ? -webkit-transform: translateX(-100%);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(-100%);

? ? ? /* IE 9 */? ? ? transform: translateX(-100%);

? ? ? /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? ? transition: all 0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? }

? ? .loaded #loader-wrapper .loader-section.section-right {

? ? ? -webkit-transform: translateX(100%);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(100%);

? ? ? /* IE 9 */? ? ? transform: translateX(100%);

? ? ? /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? ? transition: all 0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

? ? }

? ? .loaded #loader {

? ? ? opacity: 0;

? ? ? -webkit-transition: all0.3s ease-out;

? ? ? transition: all 0.3s ease-out;

? ? }

? ? .loaded #loader-wrapper {

? ? ? visibility: hidden;

? ? ? -webkit-transform: translateY(-100%);

? ? ? /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateY(-100%);

? ? ? /* IE 9 */? ? ? transform: translateY(-100%);

? ? ? /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.3s 1s ease-out;

? ? ? transition: all 0.3s 1s ease-out;

? ? }

? ? /* JavaScript Turned Off */? ? .no-js #loader-wrapper {

? ? ? display: none;

? ? }

? ? .no-js h1 {

? ? ? color: #222222;

? ? }

? ? #loader-wrapper .load_title {

? ? ? font-family:'Open Sans';

? ? ? color: #FFF;

? ? ? font-size: 19px;

? ? ? width: 100%;

? ? ? text-align: center;

? ? ? z-index:9999999999999;

? ? ? position: absolute;

? ? ? top: 60%;

? ? ? opacity: 1;

? ? ? line-height: 30px;

? ? }

? ? #loader-wrapper .load_title span {

? ? ? font-weight: normal;

? ? ? font-style: italic;

? ? ? font-size: 13px;

? ? ? color: #FFF;

? ? ? opacity: 0.5;

? ? }

? ? ?

? ? ? 正在加載309-admin,請耐心等待

? ? ? ?
? ? ? ? master-tzy? ? ? ? ? ? ?

然后看一下后臺管理系統的效果圖吧！Ｔ椎簟：巧凇！９煅佟孟害！????????????????????????

登錄頁面如下：

運行Mobile端的商城和PC端的管理系統時，前提必須是先打開Node+express的本地服務器（后面會說到）挪拟，不然會報以下錯誤：

首頁效果如下：

首頁布局其實也是參考了餓了么的Contain布局吧纹坐，但又不全是，所以我沒有加動態(tài)的Tag標簽頁了舞丛，其實也可以實現吧，不過自己用的面包屑也湊合著吧果漾，就懶得換了球切，當時答辯的前一天晚上，同組的Mr Yang都把代碼發(fā)給我了绒障，我也沒來得及去加吨凑，因為當時要加的功能真的還有幾個，比如后臺沒有考慮周到的大多是沒有對數據進行查詢户辱，還有對訂單沒有進行分頁鸵钝，以及訂單的按時間查找等等。后來肝到凌晨2點多實在不行了庐镐，所以一直沒有將面包屑換掉恩商，所以也湊合著用吧。

在這里再鏈接一個專門用到了餓了么組件中的Tag的動態(tài)標簽頁的小例子吧必逆，雖然很簡單怠堪，但還是根據自身需要來決定是否要用到Tag標簽頁吧揽乱。

鏈接地址：https://github.com/tzy13755126023/Vue-elementui-demo-Tag

這里用到了視圖化數據的Echarts中的柱形圖和折線圖來展示數據，關于Echarts怎么使用這里也不做詳細介紹了吧粟矿，直接把官方Api文檔地址放這里了凰棉，地址如下：?https://www.echartsjs.com/api.html#echarts。請自行查看陌粹。

我只貼出關于Echarts組件的部分代碼撒犀。

? ? ? ? // 引入 ECharts 主模塊varecharts = require('echarts/lib/echarts');// 引入柱狀圖require('echarts/lib/chart/bar');

require("echarts/lib/component/dataset");// 引入提示框和標題組件require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

require("echarts/lib/component/legendScroll");

require("echarts/lib/component/axisPointer");

require("echarts/lib/component/markLine");

export default{

? name:'Echarts1',

? data(){

? ? ? ? return{

? ? ? ? }

? },

? mounted(){

? ? ? varmyChart = echarts.init(document.querySelector('.ECharts1'))

? ? ? myChart.setOption({

? ? ? ? title: {

? ? ? ? ? text: '2018-2019年各類藥物月交易額',

? ? ? ? ? textStyle:{? ? ? ? ? ? ? ? ? //文字樣式color:'#000',//顏色fontWeight:700,//粗細fontSize:30,? ? ? ? ? ? ?

? ? ? ? ? ? // textBorderColor:'black',? //文字本身的描邊顏色。textShadowColor:'rgba(255,0,0,.2)',//文字本身的陰影顏色掏秩。

? ? ? ? ? ? // textShadowBlur :5,? ? ? //文字本身的陰影長度或舞。

? ? ? ? ? ? // textShadowOffsetX:8,? ? //文字本身的陰影 X 偏移。

? ? ? ? ? ? // textShadowOffsetY:5,? ? ? //文字本身的陰影 Y 偏移哗讥。? ? ? ? ? }

? ? ? ? },

? ? ? ? tooltip : {? ? ? ? ? ? ? ? //提示框組件嚷那。trigger:'axis',//觸發(fā)類型。

? ? ? ? ? // 可選： 'item'數據項圖形觸發(fā)杆煞，主要在散點圖魏宽，餅圖等無類目軸的圖表中使用。

? ? ? ? ? //? ? ? ? 'axis'? 坐標軸觸發(fā)决乎，主要在柱狀圖队询，折線圖等會使用類目軸的圖表中使用。axisPointer : {// 坐標軸指示器构诚，坐標軸觸發(fā)有效type :'shadow'// 默認為直線蚌斩，可選為：'line' | 'shadow'? ? ? ? }

? ? },

? ? legend: {? //? 圖例組件data:['中西藥品','養(yǎng)生保健','醫(yī)療器械','計生用品','中藥飲品','美容護膚'],

? ? ? ? right:25,

? ? ? ? top:70,

? ? ? ? // orient:'vertica'? 圖例列表的布局朝向》吨觯可選：'horizontal'? ? 'vertical'itemWidth:30,// 圖例的寬度itemHeight:20,// 圖例的高度? ? ? ? textStyle:{

? ? ? ? ? fontSize:16? ? ? ? }

? ? },

? ? grid: {? ? //? 直角坐標系內繪圖網格top:150,?

? ? ? ? left: '3%',

? ? ? ? right: '4.5%',

? ? ? ? bottom: '3%',

? ? ? ? containLabel: true? ? },

? ? xAxis : [? ? // grid 中的 x 軸? ? ? ? {?

? ? ? ? ? ? type : 'category',//類目軸送膳，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據? ? ? ? ? ? data : [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? value: '2018年11月',

? ? ? ? ? ? ? ? textStyle: {