vue-admin-stepbystep

A Vue.js project

серия статей

• [nuggets.capable/post/684490…] vue-admin подробные примечания, вы должны сделать серию проектов (2) вручную
• [nuggets.capable/post/684490…] vue-admin подробные комментарии, вы должны выполнить серию проектов (3) вручную на сервере, чтобы решить ошибку
• Хоть воробей и маленький, но все внутренние органы у него есть: [адрес проектаGitHub.com/почему Лиза/vUE…)

Функция проекта

• 1 логин
• 2 Главная
• 3 Выход
• 4 страницы таблицы

Техническая точка проекта

• 1. Используйте вью
• 2. Используйте графики
• 3, используйте json-сервер (вторая серия для написания подробной документации)
• 4. Используйте узел для запуска простого сервиса для обслуживания интерфейса (вторая серия пишет подробные документы)
• 5, используйте аксиомы
• 6, Правила использования vue-router (асинхронная загрузка и синхронная загрузка)
• 7, использование перехвата обратного вызова (localstorage или cookie)
• 8, с элементом пользовательского интерфейса
• 9, изменить яму в стиле в компоненте
• 10, оптимизация при упаковке
• 11, оптимизация DNS
• 12, настроить локальный прокси, использовать интерфейс (вторая серия написать подробные документы)
• 13, используя Axios с Simulation Simulation Crud (Series II White подробная документация)
• 14. Используйте плагин nprogress
• 15. Малоизвестная полоса прокрутки element-UI.
• 16, макет сетки, адаптируется к размеру экрана, чтобы соответствовать медиа-запросу
• 17, css использует меньше
• 18, стиль кода, личный стиль, отключите jslint, чтобы невежественные друзья не сошли с ума
• 19, обработка совместимости (вторая серия пишет подробные документы)

Строительство проекта

• 1 vue init webpack XXИспользование vue-cli 2.0

Project name                            ：默认
Project description                     ：默认
Author                                  ：默认
Vue build                               ：选择 Runtime + Compiler
Install vue-router?                     ：Y
Use ESLint to lint your code?           ：Y 选择 Standard
Set up unit tests                       ：n
Setup e2e tests with Nightwatch?        : n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM

• 2 Войдите в проект: cd vue-admin-stepbystep
• 3 Запустите проект: npm run dev

Как добавить новую функцию? ? ?

• 1 дюймcomponentsСоздайте новую папку (login) в файле и создайте компонент (Login.vue) в файле
• 2 дюймаrouter/index.jsИмпорт компонентов в (login.vue)
• 3 Настройте правила маршрутизации

Используйте element-ui в проекте (другие изображения с углублением gg)

• Документация ElementUI
• Установить:npm i element-ui -S

// main.js

// 导入elementui - js
import ElementUI from 'element-ui'
// 导入elementui - css
import 'element-ui/lib/theme-chalk/index.css'
// 安装插件
Vue.use(ElementUI)

---

с чего начался проект

• 1 Запустите в терминале:npm run dev, который на самом деле работает:webpack-dev-server ...
• 2 Запустите сервер с помощью webpack-dev-server
• 3 По назначенному входуsrc/main.jsНачать анализ модулей, используемых на портале
• 4 При встречеimport, webpack загрузит содержимое этих модулей (если есть повторяющиеся модули, такие как: Vue, на самом деле он будет загружен только один раз в будущем), и выполнит код, когда встретит код
• 5 Создайте экземпляр Vue, скомпилируйте компонент приложения в качестве шаблона и визуализируйте содержимое шаблона в компоненте приложения в позиции #app на странице.

Конфигурация маршрутизации

• 1 Загружать маршруты асинхронно
• 2 Используйте плагин индикатора выполнения
• 3 Сохранение сеанса блокировки входа в систему

import Vue from 'vue'
import Router from 'vue-router'
//引入nprogress进度条
import NProgress from 'nprogress'
//引入nprogress进度条的样式
import 'nprogress/nprogress.css'
//在打包过程中每一个组件都会打包成一个js文件，如果不使用使用/* webpackChunkName: "home" */
//在打包的时候就会生成0.js,1.js等等，使用了之后就会打包成home.js
// 导入 Login 组件（注意，不要添加 .vue 后缀）
//这是路由的异步加载，！important,这是优化项目必须的

//引入home组件
const Home = () => import(/* webpackChunkName: "home" */ '@/components/home')
//引入登录组件
const Login = () => import(/* webpackChunkName: "home" */ '@/components/login')
//引入table组件
const Table = () => import(/* webpackChunkName: "home" */ '@/components/table/table')
//引入homeMain组件
const HomeMain = () => import('@/components/HomeMain')

//这里是同步加载
//import Login from '@/components/login/Login'

Vue.use(Router)

const router = new Router({
	mode: 'history',//开启了history模式，去除了#，
	 // 在vue中，一般来说通过实例去访问某个属性的
     // vm.xxxx  vm.$set  vm.$refs  vm.$router
	routes: [
		{
			path: '/',
			redirect: '/homeMain'//路由的重定向
		},
		{
			path: '/login',
			name: 'login',
			component: Login
		},
		{
			path: '/home',
			name: 'home',
			component: Home,
			// children 用来配置子路由，将来匹配的组件会展示在 Home 组件的 router-view 中
		    // 对于子路由path来说：
		    // 1 如果不是以 / 开头，那么，哈希值为： 父级path + / + 子级path
		    //    也就是： /home/homeMain
		    // 2 如果子级路由的path是以 / 开头的，那么将来的哈希值为：/users 不再带有父级的path了
            //    也就是：/homeMain
            //这是页面中的子路由，在页面中必须声明router-view作为出口
			children: [
				{
					path: '/homeMain',
					name: 'homeMain',
					component: HomeMain
				},
				{
					path: '/table',
					name: 'table',
					component:Table
				}
			]
		}
	]
});
// 给router配置导航守卫
// to: 去哪儿
// from: from 哪儿来
// next() :  next()：放行   next('/login') 去login组件
// 在登录成功以后，将 token 存储到 localStorage 中
// 在 导航守卫 中先判断当前访问的页面是不是登录页面
// 如果是登录页面，直接放行（next()）
// 如果不是登录页面，就从 localStorage 中获取 token，判断有没有登录
// 如果登录了，直接放行（next()）
// 如果没有登录，就跳转到登录页面让用户登录（next('/login')
router.beforeEach((to, from, next) => {
//	开启进度条
	NProgress.start()
//	获取是否有token
	let token = localStorage.getItem('myToken')
	// 如果已经就是要去login了，就不需要拦截了
	if (to.path === '/login' || token) {
		next()
	}else {
		next('/login')
	}
	
});
router.afterEach(() => {
//	关闭进度条
	NProgress.done()
})

export default router

Функция входа

• 1 Установите:npm i -S axios
• 2 дюймаLogin.vueИмпорт аксиом в компонент
• 3 Используйте axios для отправки запроса в соответствии с документом интерфейса для завершения входа в систему.
• 4 Установите токен при входе в систему, вы можете использовать файл cookie localStorage и т. д., чтобы выбрать

<div class="l-right">
   		<div class="l-l">
   			 <!-- @tab-click="handleClick" -->
   			<el-tabs v-model="activeName">
   				<el-tab-pane label="用户登录" name="first">
   					<!-- el-form:自定义表单组件 -->
   				    <!-- :model="form" 表单对象，用于收集收据 -->
   				    <!-- label-width="80px"：label的宽度 -->
   				    <!-- el-form-item：表单项  -->
   					<el-form ref="form" status-icon :rules="rules" :model="form" label-width="80px">
   						<el-form-item  prop="username">
   							<el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="iconfont icon-yonghuming"></el-input>
   						</el-form-item>
   						<el-form-item  prop="password">
   							<!-- 将来我们给组件注册事件的时候，可以会注册不上 -->
   							<!--@keyup.enter点击键盘的enter触发事件-->
   							<!-- .native: 注册事件，给组件的根元素注册事件 -->

   							<el-input type="password" v-model="form.password" placeholder="请输入密码" @keyup.enter.native="login" prefix-icon="iconfont icon-mima"></el-input>
   						</el-form-item>
   						<el-form-item>
   							<!--使用@语法糖绑定事件-->
   							<el-button type="primary" @click="login">登录</el-button>
   							<el-button @click="reset">重置</el-button>
   						</el-form-item>
   					</el-form>
   				</el-tab-pane>
   				<el-tab-pane label="帅哥登录" name="second">长得很帅</el-tab-pane>
   			</el-tabs>
   		</div>
   		
   	</div>
   </div>

 export default {
		data () {
			return {
//				定义一些变量,可以使用{{}}语法在页面中直接获取
				activeName: 'first',
				form: {
					username: 'why',
					password: "123456"
				},
				rules: {
					// 用户名的校验
					username: [
						// 用户名是必须
//						required是否必须
//						message提示信息
//						trigger如何触发
						{ required: true, message: '请输入用户名', trigger: 'change' },
						{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'change' }
					],
					// 密码的校验
					password: [
						{ required: true, message: '请输入密码', trigger: 'change' },
						{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			login () {
//			 先触发页面中的检验规则,不通过给提示,通过就向后台发送请求,
//           $refs是vue中获取页面的,在html中要写 ref="form"
		     this.$refs.form.validate(async (valid) => {
				 if (valid) {
//				 	使用axios向后台发送请求
//                  在es6中的箭头函数没有this绑定，可以打印出来指向的是vue实例，这点可以自行百度，加深映像
					 this.axios('/api/login').then( res => {
						 console.log(res.data[0])//用来查看接口里面的数据
						 let lg = res.data[0] //把数据赋值给变量
						 console.log(lg.username,lg.password)//主要用来查看数据
						 if(lg.username === this.form.username && lg.password==this.form.password){
							 localStorage.setItem('myToken',lg.username)//设置拦截，可以用cookie等，在控制台中的Application中查看
							 this.$message.success('恭喜你，登录成功')//登录成功的提示
							 this.$router.push('homeMain') //使用编程式导航路由进行跳转
						 }else {
							 this.$message.error('账号或者密码错误')//账号密码错误时的提示

						 }
					 })
				 }
			 })
			},
			reset () {
				this.$refs.form.resetFields()//清空输入框中的信息
//				数据被我写死了,可以自行改动
			}
		}
  };

сверху и сбоку

<el-container>
			<!--给el-header设置 高度-->
			<el-header style="height: 70px;">
				<div class="logo">
					<!--这里可以放一般网站的logo-->
					<!--<img src="../assets/main/logo.png" alt="">-->
				</div>
				<div class="header-right">
					<div class="logout"  @click="layout">
					    <!--javascript:;为了防止a标签的默认行为，-->
						<a href="javascript:;">退出</a>
					</div>
					<div class="people">
						<!--映入iconfont 的字体图标-->
						<i class="iconfont icon-lianxirenwode"></i>
						张三
					</div>
					<div class="call">
						<i class="iconfont icon-lianxiwomen"></i>
						联系我们
					</div>
				</div>
			</el-header>
			<el-container>
				<el-aside width="160px" background-color="#26292E">
					<el-scrollbar style="height: 100%;">
						  <!-- el-menu: 导航菜单的组件 -->
				          <!-- default-active：默认高亮的菜单 -->
				          <!-- open close 展开和关闭的事件 -->
				          <!-- el-submenu: 子菜单 -->
				          <!-- el-menu-item-group: 子菜单中分组 -->
				          <!-- el-menu-item：子菜单中的每一项 -->
				          <!-- unique-opened: 保证只能打开一个子菜单 -->
				          <!-- router: 如果router为true，那么index就会作为路由的连接 -->
				          
						<el-menu :unique-opened='true' :router="true" text-color="#ffffff" active-text-color="#cccccc">
							<el-submenu index="1">
								<template slot="title"><i class="iconfont icon-shouye"></i>
									<span @click="gomain">
										首页
									</span>
								</template>
							</el-submenu>
						
							<el-submenu index="2">
								<template slot="title"><i class="iconfont icon-message-channel"></i>table</template>
								<el-menu-item-group>
									<el-menu-item index="/table">table</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</el-scrollbar>
				</el-aside>
				<el-container>
					<!--使用element的自带的滚动条，官方文档没有-->
					<el-scrollbar style="height: 100%;width: 100%;">
					<el-main>
						 <keep-alive>
				            <!-- 这里是会被缓存的视图组件 -->
				            <!-- $route.meta.keepAlive：如果是true，
				                 说明是缓存组件，通过keep-alive这个标签把缓存组件显示出来 -->
			              <router-view v-if="$route.meta.keepAlive">
			              </router-view>
			             </keep-alive>
			          <!-- 这里是不被缓存的视图组件 -->
			          <router-view v-if="!$route.meta.keepAlive">
			          </router-view>
					</el-main>
					</el-scrollbar>
				</el-container>
			</el-container>
		</el-container>

export default {
		created() {

		},
		data() {
			return {

			}
		},
		methods: {
			gomain() {
			//编程式导航
				this.$router.push('/homeMain')
			},
          //退出功能
			layout() {
//				退出功能要移除localStorage中的myToken
				localStorage.removeItem('myToken')
//				跳转到首页
				this.$router.push('login')
//				退出成功提示
				this.$message.success('退出成功了')
			},
			
		},
	}

титульная страница

• Код немного более перехвачен, в основном изменены графики, стрелка оси X, стиль гистограммы и т. д., а также сетка элементов для взаимодействия с медиа-запросами.

xAxis: {
       data: ["三月", "四月", "五月", "六月", "七月"],
		axisLine: {
			symbol: ['none', 'arrow'],
			lineStyle: {
			color: 'rgba(212,212,212,1)', // x坐标轴的轴线颜色 
				width: 1 //这里是坐标轴的宽度,为0就是不显示 
				}
            		}
        	},
        	yAxis: [{

			type: 'value',
			axisLabel: {
	    		show: false //这行代码控制着坐标轴x轴的文字是否显示 
			},
			splitLine: {
				show: false, // 网格线是否显示 
				// 改变样式 
			lineStyle: {
				color: '#EDEDED' // 修改网格线颜色 
					}
			},
			axisLine: {
				lineStyle: {
				color: '#fff', // x坐标轴的轴线颜色 
				width: 0 //这里是坐标轴的宽度,为0就是不显示 
					}
				}
		}],

использование форм

<div class="table">
		<div class="t-top">
			<!--使用el-input 要注意，他默认占父级100%的宽度-->
			<el-input v-model="query" placeholder="请输入内容"></el-input>
			<!--el-button 绑定点击事件向后台发送数据查询-->
			<!--在此处通常会涉及到模糊查询，此时我们还需要绑定keyup事件，向后台请求数据，然后渲染一个小的下拉框，我们需要做的是发送查询的字段给后台，
			后台使用sql语句模糊查询，我们渲染就可以-->
			<el-button type="primary" @click="search">查询</el-button>
		</div>
		<div class="t-bottom">
			
			    <!-- el-table:表格组件 -->
			    <!-- :data='tableData' 表格显示的数据 -->
			    <!-- el-table-column：表格的一列 -->
			    <!-- prop： 当前列要显示的数据 ，tableData内的数据-->
			    <!-- label：表头 -->
			    <!-- width: 这一列的宽度 -->
			    <!--min-width：用来设置百分比-->
			     <!--:header-cell-style="{background:'red'}"-->
		        <!--align="center"表格内的数据居中-->
			     
			 <el-table
		      :data="tableData"
		      style="width: 100%"
		      :header-cell-style="{background:'red'}"
		      >
		      <el-table-column
		        prop="date"
		        label="日期"
		        align="center"
		        width="180">
		      </el-table-column>
		      <el-table-column
		        prop="name"
		        label="姓名"
		        align="center"
		        width="180">
		      </el-table-column>
		      <!--如果不设置百分比，就自动分配剩余的宽度-->
		      <el-table-column
		        prop="address"
		        align="center"
		        label="地址">
		      </el-table-column>
		    </el-table>
		</div>
	</div>

export default {
	  data() {
	    return {
//	      绑定的input 查询关键字
	      query: '',
//	      需要一个数组用来存放table的数据
//	      这是element组件里面的,
	        tableData: []
	    }
	  },
	  mounted() {
//	  	在vue的生命周期的mounted中调用渲染列表
	  	this.initTable()
	  },
	  methods:{
	  	initTable() {
	  		this.axios('/api/table').then( res => {
	  			console.log(res.data)//查看接口返回时什么样的数据，要常用
	  			this.tableData = res.data //接口返回的是一个数组，直接可以赋值给table
	  		})
	  	},
	  	search() {
	  		
	  	}
	  }
	}

Внимание на изменение стиля element-ui!

<!--使用scoped需要注意，使用的它之后，你就无法更改elelment组件中的样式-->
<style lang="less" scoped="scoped">
/*如果不想使用scoped,你就用父级的class把样式全部包裹起来，就不会相互影响页面的样式了*/

Ниже приведены некоторые концептуальные вещи, а другие функциональные серии будут постепенно улучшаться.

Программная навигация

• Это реализовать функцию перехода маршрутизации через код JS.

// 注意：是 router 不是 route
// router用来实现路由跳转，route用来获取路由参数
// push 方法的参数为：要跳转到的路由地址（path）
this.$router.push('/home')

пароль

• Добавьте type="password" в компонент поля ввода, чтобы он стал состоянием поля пароля.

<el-input type="password" v-model="loginForm.password"></el-input>

Перехват входа

• Примечание. Пользователям не должен быть разрешен доступ к какой-либо странице, кроме входа в систему без входа в систему.

Описание всего процесса входа и перехвата

• 1 После успешного входа сохраните токен в localStorage
• 2 В навигационной панели сначала определите, является ли текущая страница, к которой осуществляется доступ, страницей входа в систему.
• 3 Если это страница входа в систему, отпустите ее (далее())
• 4 Если это не страница входа, получите токен из localStorage, чтобы определить, существует ли
• 5 Если вы вошли в систему, сразу отпустите (далее())
• 6 Если не войти в систему, вы переходите на страницу входа, позволяет пользователям регистрироваться (следующий ('/ login')))

Описание механизма токена

• В проекте при успешном входе сервер вернет нам токен
• Этот токен является признаком успешного входа
• Этот токен эквивалентен использованию sessionid в механизме cookie+session.

Персонал компании и процесс разработки проекта

• 1 Потребность менеджеров по продуктам в настройке проектов
• 2 Назначьте задачи: сначала назначьте все задачи команде проекта, а затем назначьте команду проекта каждому разработчику.
• 3 Разработка: получите прототип продукта + документ с требованиями + черновые данные дизайна пользовательского интерфейса, преобразуйте их в HTML-страницу и выполните функцию.
• 4 После завершения функции проверьте себя на наличие ошибок
• 5. Тестируйте свои функции с помощью тестировщиков.Когда ошибка будет протестирована, она будет выявлена ​​через систему управления проектами, такую ​​как ZenTao.
• 6 Самостоятельно исправить ошибки, обнаруженные тестировщиками
• 7 В конце концов, проект будет запущен, когда ошибок больше не будет.

产品经理（Product Manager）
  提需求
  产出： 产品原型 + 需求文档
  原型设计软件：Axure 、墨刀

UI（设计）
  将 产品经理 给的 原型图 设计为 好看的UI稿

FE（前端）front-end
  产品原型 + 需求文档 + UI设计稿 ===> HTML页面

BE（后端） back-end
  给前端提供数据接口

测试人员
  产品原型 + 需求文档 + UI设计稿 来测试我们写的功能
  发现你的功能 与 需求 不一致，那就说明除Bug了，那么，测试人员就会提Bug
  Bug系统： 禅道

项目经理（管理技术）
  技术攻坚，与其他项目组人员沟通，分配任务 等

ограничен в компоненте Vue с одним файлом

• Функция: датьstyleдобавить тегиscopedПосле атрибута стиль повлияет только на структуру в текущем компоненте и не повлияет на другие компоненты.

lang в компоненте Vue с одним файлом

• Функция: добавитьlang="less"После этого вы можете использовать синтаксис less
• Но вам нужно установить его самостоятельно:npm i -D less less-loader

Форматирование шаблона однофайлового компонента с помощью плагина Vetur в VSCode

• Откройте настройки, настройте:"vetur.format.defaultFormatter.html": "js-beautify-html"

Описание вызова интерфейса

• Уведомление:Все интерфейсы должны передавать токен, и только если передан правильный токен, сервер вернет данные во внешний интерфейс.
• если не прошелtoken, сервер вернется401, сообщить вызывающему интерфейсу, что нет разрешения на доступ к этому интерфейсу

---

cookie+session VS token

• Состояние Kill: от сеанса к токену

Git использовать

• удаленный филиал

# 克隆仓库
git clone [仓库地址]

# 推送
git push [仓库地址] master

# 简化推送地址
git remote add XX [仓库地址]
git push -u XX master
# 第一次执行上面两条命令，以后只需要输入以下命令即可
git push XX

# 拉取
git pull [仓库地址] master
git pull XX master

Пагинация параметров маршрутизации

• 1 Настройте параметры пейджинговой маршрутизации, параметры являются необязательными
  • После того, как параметр является необязательным, маршрут может быть сопоставлен:/XXили/XX/3
• 2. При использовании маршрутизации для разбиения на страницы необходимо учитывать две ситуации:
• 3 Первый тип: При входе на страницу необходимо получить данные соответствующей страницы по номеру страницы в текущих параметрах маршрутизации
• 4 Второй: Нажмите на компонент пейджинга, чтобы получить данные, вам нужно сделать две вещи:
  • 4.1 Получить данные текущей страницы (вызвать метод для получения данных)
  • 4.2 Измените значение хеша на номер текущей страницы ( this.$router.push() )
• 5 Нажмите кнопку пейджинга, чтобы получить второе представление о данных:
  • 5.1 Нажатие кнопки пейджинга запускает событие pageChange подкомпонента
  • 5.2 Измененный маршрут в событии pageChange ( this.$router.push() )
  • 5.3 После изменения маршрута $route в часах отслеживает изменение маршрута
  • 5,4 дюйма$route(to) {}В методе номер текущей страницы получается через параметр to, и снова вызывается метод получения данных для получения данных текущей страницы

Упаковка и оптимизация проекта

• Команда упаковки:npm run build

нагрузка по требованию

• 1 изменитьrouter/index.jsСинтаксис для импорта компонентов в

// 使用：
const Home = () => import('@/components/home/Home')
// 替换：
// import Home from '@/components/home/Home'

// 给打包生产的JS文件起名字
const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home')

// chunkName相同，将 goods 和 goods-add 两个组件，打包到一起
const XX = () => import(/* webpackChunkName: 'XX' */'@/components/XX')
const XXX = () => import(/* webpackChunkName: 'XX' */'@/components/XXX')

• 2 (Этот шаг можно пропустить)Исправлять/build/webpack.prod.conf.jschunkFilename в

{
  // [name] 代替 [id]
  chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
}

Используйте CDN

• Сервис ускорения CDN проектов с открытым исходным кодом

• 1 дюймindex.htmlПредставьте JS-файлы, предоставленные CDN.

• 2 дюйма/build/webpack.base.conf.jsДобавить внешние конфигурации (перед разрешением)

• Уведомление: После введения файла стиля Element-UI через CDN нет необходимости импортировать файл CSS Element-UI в main.js. Таким образом, вы можете закомментировать стиль импорта Element-UI в main.js.

• externalsКонфигурация:

externals: {
  // 键：表示 导入包语法 from 后面跟着的名称
  // 值：表示 script 引入JS文件时，在全局环境中的变量名称
  vue: 'Vue',
  axios: 'axios',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
  moment: 'moment',
  echarts: 'echarts',
}

import ElementUI from 'element-ui'

Общий пакет CDN

• vue

• vue-router

• axios

• element-ui JS

• element-ui CSS

• moment

• проиллюстрировать:

  • 1 Сначала найдите предоставленный CDN в официальной документации
  • 2 Если нет, то вhttps://www.bootcdn.cn/или других провайдеров CDN, чтобы найти

<!-- Include the Quill library -->
<script src="https://cdn.bootcss.com/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Quill JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.core.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.bubble.min.css" rel="stylesheet">

удалить консоль

new webpack.optimize.UglifyJsPlugin({
  compress:{
    warnings: false,
    drop_debugger: true,
    drop_console: true
  }
})

Кэшировать и сохранять состояние компонента

• keep-alive
• Решение: использоватьkeep-alive,Действуйте следующим образом:

1 在需要被缓存组件的路由中添加 meta 属性
  meta 属性用来给路由添加一些元信息（其实，就是一些附加信息）
{
  path: '/',
  name: 'home',
  component: Home,
  // 需要被缓存
  meta: {
    keepAlive: true
  }
}

2 修改路由出口，替换为以下形式：
  根据 meta 是否有 keepAlive 属性，决定该路由是否被缓存
<keep-alive>
  <!-- 这里是会被缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 这里是不被缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

Включить режим истории маршрута

• добавив в маршрутmode: 'history'Вы можете удалить # в адресной строке браузера
• Во время разработки просто добавьте эту конфигурацию
• Однако после того, как проект будет упакован, будут проблемы

// 去掉 # 后，地址变为：

http://localhost:1111/home

那么，服务器需要正确处理 /goods 才能正确的响应内容，
但是，/home 不是服务端的接口，而是 用来在浏览器中实现 VueRouter 路由功能的

Как обрабатывается бэкэнд

• 1 Приоритет статических ресурсов
• 2 Запросы на нестатические ресурсы обрабатываются единообразно и возвращаются в index.html.
• 3 Когда браузер откроет index.html, он загрузит js-файл маршрута, затем маршрут проанализирует путь /login в URL-адресе без #

Продолжение следует

[адрес проектаGitHub.com/почему Лиза/vUE…)