777米奇影视第四色,善良娇妻让公泄欲,一区二区

第一步：安裝Node

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

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

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

? ? 下載完成，如圖:

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

? 雙擊安裝文件，如圖：

3、點擊下一步，選擇同意協議，否則無法繼續安裝。如圖：

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

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

完成效果：

安裝完成后，在cmd窗口下執行 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 項目名，確認創建項目后，后續還需輸入一下項目名稱、項目描述、作者、打包方式、是否使用ESLint規范代碼等等，詳見上圖。安裝順利執行后會，生成如下文件目錄。

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

前面簡單的介紹了怎么搭建Vue項目以及Node環境，下面切入正題：

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

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

| |-- build.js // 生產環境構建代碼

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

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

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

| |-- webpack.dev.conf.js // webpack開發環境配置

| |-- webpack.prod.conf.js // webpack生產環境配置

|-- config // 項目開發環境配置

| |-- dev.env.js // 開發環境變量

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

| |-- prod.env.js // 生產環境變量

|-- src // 源碼目錄

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

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

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

| |-- router // 路由文件

| |-- store // vuex的狀態管理

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

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

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

|-- static // 靜態文件，比如一些圖片，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端的演示效果吧：

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

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

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

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

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

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

| |-- build.js // 生產環境構建代碼

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

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

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

| |-- webpack.dev.conf.js // webpack開發環境配置

| |-- webpack.prod.conf.js // webpack生產環境配置

|-- config // 項目開發環境配置

| |-- dev.env.js // 開發環境變量

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

| |-- prod.env.js // 生產環境變量

|-- src // 源碼目錄

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

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

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

| |-- router // 路由文件

| |-- store // vuex的狀態管理

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

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

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

|-- static // 靜態文件，比如一些圖片，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布局吧，但又不全是，所以我沒有加動態的Tag標簽頁了，其實也可以實現吧，不過自己用的面包屑也湊合著吧，就懶得換了，當時答辯的前一天晚上，同組的Mr Yang都把代碼發給我了，我也沒來得及去加，因為當時要加的功能真的還有幾個，比如后臺沒有考慮周到的大多是沒有對數據進行查詢，還有對訂單沒有進行分頁，以及訂單的按時間查找等等。后來肝到凌晨2點多實在不行了，所以一直沒有將面包屑換掉，所以也湊合著用吧。

在這里再鏈接一個專門用到了餓了么組件中的Tag的動態標簽頁的小例子吧，雖然很簡單，但還是根據自身需要來決定是否要用到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',//觸發類型。

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

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

? ? },

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

? ? ? ? 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: {