年前学习vue记录的笔记，今天稍微整理下发出。 首先记录学习所使用的网站，以及各配套资料，感谢视频制作者。 观看教学视频并实操，由于自己时间原因，直接跳过基础从实战创建项目开始到最后，中间记录了各个步骤及图文，贴出来与大家分享并自我回顾。
学习网站：
vue教程-黑马-vue2.4--vuejs-vue.js-205集完整版-前端框架-前端
www.bilibili.com/video/av506…
附带全家桶资料：
2018年vue教程配套资料:pan.baidu.com/s/1bYDMfKmR… 提取码：7h8s 2019年vue全家桶+项目实战教程配套资料：pan.baidu.com/s/1FX_1sz0X… 提取码: 8exy
前言：
非专业前端人员，怕自己时隔太久忘记如何启动项目，便捷记录下
1、启动mysql：phpstudy
2、启动接口项目：
（1）、cd C:\Users\78755\Desktop\17-21 Vue.js项目实战开发\17-21 Vue.js项目实战开发\20-21vue电商\3.vue-项目实战day1\素材\vue_api_server\vue_api_server
（2）、IDEA打开api项目，命令行：node .\app.js
3、打开vue可视化界面：
终端：vue ui
serve 运行 启动app
4、vscod打开项目；
一、初始化：
二、安装插件：
插件-添加插件： vue-cli-plugin-element
三、配置axios：
依赖-安装依赖： axios
四、初始化git远程仓库（省略）
五、后台项目的环境安装配置：
1、安装phpStudy：
2019年vue全家桶+项目实战教程配套资料：pan.baidu.com/s/1FX_1sz0X… 提取码: 8exy
17-21 Vue.js项目实战开发\20-21vue电商\3.vue-项目实战day1\素材
phpStudy：www.xp.cn/wenda/401.h…
2、导入mydb.sql；
3、安装依赖项： 打开C:\Users\78755\Desktop\17-21 Vue.js项目实战开发\17-21 Vue.js项目实战开发\20-21vue电商\3.vue-项目实战day1\素材\vue_api_server\vue_api_server
shift+右键打开PowerShell
npm install
4、 运行项目：
输入cls清屏
node .\app.js
5、postman测试接口；
六、vscod打开项目；
vue可视化界面：vue ui
serve
运行
启动app
（1）、删除无用组件；
（2）、创建登录组件；
（3）、引入登录组件：import Login from '@/components/Login.vue'
（4）、设置路由、重定向；
（5）、添加依赖——开发依赖：less-loader、less，切换到项目，刷新，重新启动项目；
代码若报错：
七、布局：
element组件：element.eleme.cn/#/zh-CN/com…
使用图标： 1、将fonts文件夹放至：vue_shop\src\assets
2、在main.js导入字体图标：
// 导入字体图标
import './assets/fonts/iconfont.css'
3、使用：Login.vue中：
<el-input prefix-icon="iconfont icon-user"></el-input>
格式化：shift+alt+f
路由导航守卫控制访问权限：
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 从哪个路径跳转而来
// next 函数，表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next();
// 获取token const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
八、处理语法警告问题：
.prettierrc.json
{
"semi": false,
"singleQuote": true
}
取色器软件：FSCapture
九、树形：
安装依赖：vue-table-with-tree-grid
main.js中导入、手动注册：
import TreeTable from 'vue-table-with-tree-grid
Vue.component('tree-table', TreeTable)
vue element Cascader高度过长问题？segmentfault.com/q/101000002…
深拷贝：lodash中文文档：
// lodash cloneDeep(obj)
Timeline时间线组件，2.6.0版本之后才有： （组件发布时间，晚于插件）
图表：echarts
项目优化：
Vue项目优化&添加进度条效果&修改webpack默认配置&加载外部CDN&定制首页内容&路由懒加载blog.csdn.net/fengzitaba/…
加载进度条： github.com/rstacruz/np…
移除打印相关代码： www.npmjs.com/package/bab…
开发依赖：babel-plugin-transform-remove-console
1、生成打包报告： 2、通过vue.config.js修改webpack的默认配置： 3、为开发模式与发布模式指定不同的打包入口； 4、configureWebpack和chainWebpack； 5、通过chainWebpack自定义打包入口：
module.exports = {
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')
})
}}
路由懒加载： Vue Router： router.vuejs.org/zh/guide/ad…
@babel/plugin-syntax-dynamic-import babeljs.io/docs/en/bab…
通过node创建web服务器： 1、创建文件夹：vue_shop_server 2、用vscode打开此文件夹 3、终端运行：npm init -y 4、npm i express -s 5、将vue_shop中dist复制到vue_shop_server中； 6、在vue_shop_server中新建app.js；
const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(80,() => {
console.log('server running at http://127.0.0.1')
})
7、终端启动：node .\app.js
开启gzip压缩配置： 1、停止服务，终端运行：npm i compression -s 2、app.js头部导入：
const compression = require('compression')
// 启用中间件app.use(compression())
app.js：
const express = require('express')
const compression = require('compression')
const app = express()
// 一定要把此行代码，写到静态资源托管之前
app.use(compression())
app.use(express.static('./dist'))
app.listen(80,() => {
console.log('server running at http://127.0.0.1')
})
配置HTTPS服务： fressl.org
使用pm2管理应用：
命令行安装：npm i pm2 -g
自定义名称（或者id）
查看运行了哪些项目：pm2 ls
停止：pm2 stop 0
重启：pm2 restart 0
