doc

开篇

第一个页面
环境变量的配置
指令缩写
用key管理可复用的元素
vuex
预配置

我想快速搭建一个完整的vue项目, 这让我很快就打定了注意: 使用 yarn global add @vue/cli

尝试了下它的命令vue ui, 感觉很厉害, 图形化交互操作, 选择想要添加到项目的库和相关配置, 但偶尔会出状况, 加上看到它被标明beta, 如是放弃, 规规矩矩用vue create project

vue add @vue/eslint --config airbnb --lintOn save

vue add router

vue add vuex

一步一步搭起, 很顺利, 现在可能真正开始了!

为了起步我的vue学习之旅, 提前准备了VSCode编辑器的插件:

Vetur

Prettier

当然也准备了chrome插件: Vue.js devtools

第一个页面

一上来就加了个/count的路由, 用vuex管理数据,放在store里面, 一开始就了解vuex, 是因为我想今后可以做大型项目, 和我之前React一样

对比下刚写的,和我以前React项目中的代码片段, 思路差不多

Vue: (vuex)

import { mapState, mapActions } from "vuex";

export default {
  name: "count",
  computed: mapState({
    count: state => state.count
  }),
  methods: mapActions(["increment", "decrement"])
};

React: (redux)

const mapStateToProps = createStructuredSelector({
  messages: makeSelectMessages(),
});

const mapDispatchToProps = dispatch => ({
  clear: () => {
    dispatch({ type: CLEAR_MESSAGES });
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Message);

环境变量的配置

vue和angular都是定位为框架, 不得不说配置环境起来真的方便很多,
而React我需要去捣鼓webpack的配置, 当然vue的环境变量配置本质
就是webpack.DefinePlugin, 只是它和webpack整合了, 作为开发者就方便很多

文档中有段话, 提醒注意, 我理解意思是如果有个.env.[mode]文件, mode和NODE_ENV是有区别的, mode文件里没特别指明NODE_ENV时, NODE_ENV就等于mode名

Note that a mode is different from NODE_ENV, as a mode can contain multiple environment variables. That said, each mode does set NODE_ENV to the same value by default - for example, NODE_ENV will be set to “development” in development mode.

只有VUE_APP_开头的变量才可以通过webpack的内置插件嵌入客户端包中. (另外有两个特别的变量经常用到: NODE_ENV, BASE_URL)

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.

vue.config.js中同样可以设置变量, 也得带VUE_APP_前缀, 但vue.config.js配置就缺少个环境了, 一般是所有环境下都是固定值, 比如:

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

指令缩写

: 表示 v-bind, @ 表示 v-on
缩写要么都用,要么不用, 不要混合使用

用key管理可复用的元素

vue为了更高效的渲染元素, 通常会复用已有元素而不是从头开始渲染, 如果你想保证元素的独立, 请用 key 管理它
这两个input框, 每次切换将被重新渲染

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

以上例子,虽然保证了独立, 但每次切换会重新渲染, 如果即想保证独立又不被重新渲染,
可以使用 v-show, 具体看文档,
(需要注意是v-show, 不支持template, 也不支持v-else, 也不需要使用key, 它本身就是独立的)

vuex

做了几个使用vuex的实例, 在modules文件夹下管理所有不同的数据, 的确很好使用, 而且可以动态注册和卸载module, 这实用于中到大型项目, 现在慢慢我的demo项目目录结构越来越工程化了

关于动态注册, 我暂时的方案是在组件created阶段注册(如果在mounted阶段就不同步导致报错), 因为vue-router支持azy-loaded, 在组件里注册, modules是异步动态添加的, 可以避免初始化store过大.

import dynamicStore from "@/store/modules/dynamicStore";
const STORE_KEY = 'dynamicStore'
export default {
  name: "dynamicStore",
  created: function() {
    if( !(STORE_KEY in this.$store._modules.root._children) ) {
      this.$store.registerModule(STORE_KEY, dynamicStore)
    }
  },
  ...
};

预配置

预配置vue-cli, 打造更详细的脚手架, 在preset.json中预先配置, 然后

vue create --preset ./my-preset my-project

现在已经在demo中加入了eslint, 下一步准备加入jest, 用jest是因为之前
react使用的它