小白项目脱坑史

正式尝试做一个外卖项目，一遍看视频一遍做。不知道能不能坚持。工作，私事也比较多，但记录点成长历程吧。
Vue 3 + Vue router + Vuex + stylus
因为视频还是Vue 2，但项目基于cli 3，所以若有地方出处，望大佬们指正。

常用指令

npm install -g@vue/cli
vue create projectName (项目实际名字不能有大写)
vue ui
npm run serve
npm run build

一、安装cli
二、安装stylus（less 和 sass 因人而异）官网地址

	cnpm insatll stylus stylus-loader -S

	<style lang="stylus" scoped>

	</style>

三、安装mint-ui 官网地址
按需加载和全局因项目而异

目录
在这里插入图片描述
注意点
1.移动端点击事件，300ms延迟 fastclick.js

import FastClick from 'fastclick'
FastClick.attach(document.body)

2.使用模块的时候最好闭合
3.使用阿里云图标库，可以新建项目，直接导入在线 css
4. $ route为当前router跳转对象里面可以获取name、path、query、params等，$ r outer为VueRouter实例，想要导航到不同URL，则使用$router.push方法
5. meta ，可设置路由时，顺便设置元信息属性做判断。比如未登入情况下不可进入详情内容
6. param参数和query参数
7.跨域proxy cli3 新建 vue.config.js文件
8.底部tab跳转

this.$router.replace(path)
this.$route.path === path

9.nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

10.插槽slot

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。

11.加载状态

a.图片懒加载
b.类似于骨架的。判断当前数组是否存在 v-if v-else 放置图片替代

持续更新。。。

猜你喜欢