一、项目搭建

使用Vue-CLI4.x命令行工具创建Vue.2.x工程

1.使用小皮面板创建数据库

方法一：电脑应用搜索cmd—>右键以管理员身份运行—>输入sc delete mysql
sc delete mysql搞不定

方法二：任务管理器
netstat -ano |findstr”3306″

7684 右键结束进程

数据库：用户名、密码 —-mydb

2.服务端启动起来

执行js文件报Error: Cannot find module express错误。
解决办法：
在自己的工程目录下再次执行:
npm install express
在后台工程目录中按shift键的同时右键单击，选择powershell,在powershell窗口输入：
npm install
node app.js命令 — 9000

3.启动前端项目

4.使用Vue-cli创建工程：

1.vue create shop(项目名称)
2.选择vue2.x,history[no],less,ESLint standard…
前提需要安装三个插件：
vetur—识别vue文件
eslint—-约束代码
prettier—-code formatter
3.npm run serve

问题总结：使用严格模式eslint时，报错Missing space before function parentheses的问题：

解决办法：在.eslintrc.js中的rules里的对应位置添加

“space-before-function-paren”: 0

4.移动端 vue

优化 fastclick — ios 手机
按需加载 — webpack (js) 动态加载 — import() 函数
怎么适配 ？ rem @media flex 百分比
libflexable.js

适配和响应式一样不？ 不一样？
iphone5 iphone6 手淘适配方案
适配：不同的屏幕显示一样的内容
响应式： 不同的屏幕显示不同的内容。

二、登录界面

分析登录界面的逻辑

（1）如果第一次登录页面 输入正确的用户名、密码，登录；

（2）如果再访问Login，如果登录没有失效，就直接进入/home页面；

（3）每次进入home的时候都要进行校验，是否失效
token是否存在，后台发送请求校验token是否有效，对后台有一个判断

注：http无状态 没有记忆功能 ，没有办法记录状态

保持登陆状态的方案：

1.cookie —–服务器端不记录

浏览器第一次向服务器求发送请求，服务器给浏览器一个cookie保存到浏览器里面，浏览器每次访问服务器都携带cookie

2.session

服务器端会记录session，浏览器用cookie保存session

3.token—-session的加强版

浏览器请求服务器，服务器返回token;
以后每次请求都携带token找服务器验证。token存储在localstorage或sessionstorage。
token的加密方法只有内部人员知道。Api接口就沦陷。

三、项目中用到的组件和库文件

Element UI框架

所用版本：2.15.2

项目中的常用组件

el-menu侧边菜单

unique-opened—列表只展示当前点击的那一个列表的子目录
:collapse=”iscollapse”—判断是否折叠

Breadcrumb 面包屑—–子导航展示

el-switch状态切换

el-switch状态切换：
<el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change="changeStatus(scope.row.id,scope.row.mg_state)"></el-switch>
        </template>
      </el-table-column>
复制代码

注：此处两种方法都可以，推荐使用@change
@click.native=””<===>@change=”changeStatus(id,type)”

deep深度选择器

deep 深度选择器——less
/deep/ th,/deep/ td{
text-align: center;
}
css—–>>> 深度选择器
<style lang="less"></style>

Pagination 分页

 <el-pagination class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="cateInfo.pagenum"
      :page-sizes="[1, 5, 10, 15, 20]"
      :page-size="cateInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
复制代码

事件：
@current-change=”handleCurrentChange”在当前页改变执行的函数

@size-change=”handleSizeChange”在改变当前页面显示几条数据时执行
注：total的显示需要从后台动态获取

async getCateGoryList() {
      const { data: res } = await this.$http.get('categories', { params: this.cateInfo })
      console.log(res)
      console.log(res.data)
      if (res.meta.status === 200) {
        this.categoryList = res.data.result
       ` this.total = res.data.total`
      } else {
        this.$message.error(res.meta.msg)
      }
    },
复制代码

tree-table

安装：
npm install vue-table-with-tree-grid -S

时间转换—-filter

filter 时间戳 在线工具
directive 指令

<el-table-column prop="add_time" label="创办时间">
   <template slot-scope="scope">
      {{scope.row.add_time | dataFilter }}
   </template>
</el-table-column>
复制代码

方法一：

日期处理类库moment.js

1.安装：npm install moment -S

2.引入moment.js模块

import moment from 'moment'

filters:{
        dataFilter (val) {
            return moment(val * 1000).format('yyyy-MM-DD hh:mm:ss')
        }
}
复制代码

方法二：

filters:{
        dataFilter (val) {
            const timer = new Date(val * 1000)
            const y = timer.getFullYear()
            const M = timer.getMonth() + 1
            const d = timer.getDate()
            const h = timer.getHours()
            const m = timer.getMinutes()
            const s = timer.getSeconds()
            return `${y}-${M}-${d} ${h}:${m}:${s}`
        }
}
复制代码

qs是一个npm仓库所管理的包

安装：npm install qs

引入qs模块

import qs from 'qs'

原理及应用：

qs.stringify()将对象序列化成URL的形式，以&进行拼接

可以处理后台获取物流信息

前者是采用JSON.stringify(param)进行处理，后者是采用Qs.stringify(param)进行处理的
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

总结

• qs.parse()—–将URL解析成对象的形式
• qs.stringify()将对象 序列化成URL的形式，以&进行拼接
• JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
• JSON.stringify()将对象或数组转化为字符串

Echarts

Echarts.js（国内） : 可视化数据
Canvas 制作的库
highcharts 最早出现（国外）
SVG——D3.js：链接：d3js.org/

Echarts使用：

1.下载：npm install echarts -S

2.引入模块：
import * as echarts from ‘echarts’

3.为ECharts准备一个具备大小（宽高）的DOM

<div id="main" style="width: 750px;height:400px;">
</div>
复制代码

//置顶图标的配置项和数据
data () {
     return {
          var option = { }
      }
}
复制代码

4. 基于准备好的dom，初始化echarts实例

mounted(){
     var myEchart =echarts.init(document.getElementById('main'))
}
复制代码

5.准备数据和配置项 lodash库格式化数据

const result = lodash.merge(res.data, this.options)

6. 展示数据
   myChart.setOption(result)

lodash格式化工具类

安装： npm install lodash -S

引入模块：

import _ from 'lodash'

富文本编辑器

• Tinymce
• wangeditor
• qulleditor

安装quill-editor:

1.npm install vue-quill-editor –save

2.在main.js中引入

import VueQuillEditor  from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)
复制代码

项目优化

一、添加进度条

1.nprogress

安装：npm install nprogress -S

2.引入NProgress模块

在api index.js中引入：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
复制代码

3.在对应的请求拦截器和响应拦截分别添加：

NProgress.start()
NProgress.done()
复制代码

二、修改警告

tree-table-grid
将template中原有的slot-scope=”scope” slot=”order” 和并为v-slot:order=”scope”：

<!-- 排序 -->
    <template v-slot:order="scope">
       <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
       <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
       <el-tag type="warning" size="mini" v-else>三级</el-tag>
    </template>
复制代码

三、在打包阶段去console.log

安装transform-remove-console插件：

npm install transform-remove-console -D

在babel.config.js中：

plugins:[
   'transform-remove-console'
]
复制代码

四、main-dev.js开发版本&&main-pro.js发布版本

在vue.config.js中

module.export = {
  chainWebpack: config => {
    //发布阶段
    config.when(process.env.NODE_ENV === 'production', config => {
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口   add添加新的打包入口
      config.entry('app').clear().add('.src/main-prod.js')
    })
    // 开发阶段
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('.src/main-dev.js')
    })
  }
}
复制代码

五、加载CDN

1. 在vue.config.js中

config.set('externals', {
     //当看到import  vue from "vue"  不再使用本地加载，CDN  远程地址
     vue:'Vue',
     'vue-router':'VueRouter',
      axios: 'axios',
      echarts: 'echars',
      nprogress: 'NProgress',
      moment: 'moment'
     })
} 
在vue.config.js中
// html-webpack-plugin --  将index.html赋值
    config.plugins('html').tap(args => {
      args[0].isProd = true
      return args  
}
复制代码

2. 需要在public index.html页面中添加 CDN地址

<% if(htmlWebpackPlugin.options.isProd) { %>
<script src="">参考package.json中的版本号，在CDN中找对应的压缩文件引入</script>
<% } %>
复制代码

JS模板引擎 : art-template

<% if(htmlWebpackPlugin.options.isProd) { %> <% } %>
可以在html中写js语法

六、开启gzip压缩（服务器和前端都要进行配置）

下载compression-webpack-plugin插件：

.gzip 压缩格式：远传端就需要开启gzip压缩
体积小，减少了请求
nginx 进行部署前端工程，nginx需要开启gzip压缩功能

浏览器—> nginx (css js html)
nginx给浏览器返回的gzip是实时压缩，造成nginx性能消耗的问题
解决性能消耗办法：在nginx放gzip文件，即在前端实现gzip压缩
在vue.config.js中：

const ComPressionPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = /\.(js|css|json|txt|html|ico |svg)(\?.*)?$/i

module.export = {
 configureWebpack: {
    puligns: [
      new ComPressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: productionGzipExtensions,
        threshold: 10240,
         minRatio: 0.8,
        deleteOriginalAssets: true
      })
    ]
  }
}
复制代码

七、路由懒加载

在router的index.js中：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
  }
]
component: resolve => require(['@/views/login/login'], resolve)
或：

import Vue from 'vue'
const Vue = () => import('vue')
复制代码

路由模块引入分组：

（1）安装syntax-dynamic-import

输入：npm install –save-dev @babel/plugin-syntax-dynamic-import命令

（2）在根目录新建一个babel.config.js文件

plugins: [
 '@babel/plugin-syntax-dynamic-import'
]
复制代码

参照：blog.csdn.net/baidu_41601…

八、打包部署

1.在命令行输入vue ui打开界面

2.Beta界面检测项目各部分优化指标

1.在项目管理器中可以选择要打开的项目工程；

2.任务–>build(编译并压缩)—>运行—>输出

经过上面七个步骤的操作，最终使错误和警告为零，资源和模块部分较小即完成优化。

3.将最后生成的dist文件上传至域名。

启动服务：
方法一：node bin/www

方法二： npm start

pm2

nodejs管理工具pm2:使后台不挂线,终端关掉，后台仍可以执行

npm install pm2 -g
pm2 start app.js
pm2 list
复制代码