用vue 创建工程或者是创建组件注意事项

背景：原来都是一直在使用react，现在换成了vue因为中途进来的项目，一直没有从头开始理清楚，今天花了一些时间梳理了一下。

• @vue/cli 全局安装就不说了
  这里主要说下创建vue组件和创建vue项目
  刚开始的时候一直在用

vue create projectname

每次创建之后发现和自己的工程结构不一样
后来发现

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

又简单的搜了搜 init 模板 vue init webpack

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

看了一些vue组件大部分都是create出来的结构，而创建项目一般都用这几个模板，有兴趣的可以都试试

vue init webpack ProjectName

接下来开始使用 mobx-vue 这块也遇见了一些问题

• 一开始打算用ts（typescript）但是发现 vue init webpack 是3.6.0版本， ts限制需要升级webpack 到4.0以上所以放弃了
• 需要单独安装 vue-class-component

整体接起来还是比较简单的，如果接触过 redux 对store 有整体的理解还是比较容易上手

model 部分

import { action, computed, observable } from 'mobx'
export default class DModel {
  @observable count = 10
  @observable users = []

  @computed get computedAge () {
    return this.count + 1
  }

  @action.bound setAge () {
    this.count++
  }

  @action.bound async fetchUsers () {
    this.users = await Promise.resolve({a: 1})
  }
}

vue 部分

<template>
  <div class="hello">
    {{state.count}}
    <p @click="state.setAge">更新</p>
  </div>
</template>

<script>
import ViewModel from '../models/demo'
import { Observer } from 'mobx-vue'
import Component from 'vue-class-component'
import Vue from 'vue'

@Observer
@Component
export default class HelloWorld extends Vue {
  name = 'helloworld'
  state = new ViewModel()
  state2 = new ViewModel2() // .....多数据模型
  mounted () {
    console.log(this.state)
  }
}
</script>

多数据模型的时候
是不是 在model 内部，比如说在 state 里面访问 state2里面的数据
this.state2.xxx 可以这样吗？
大家下去试下，我下次有机会再给大家介绍