用vue 创建工程或者是创建组件注意事项
背景:原来都是一直在使用react,现在换成了vue因为中途进来的项目,一直没有从头开始理清楚,今天花了一些时间梳理了一下。@vue/cli 全局安装就不说了这里主要说下创建vue组件和创建vue项目刚开始的时候一直在用vue create projectname每次创建之后发现和自己的工程结构不一样后来发现Usage: vue <command&am
·
背景:原来都是一直在使用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 可以这样吗?
大家下去试下,我下次有机会再给大家介绍
更多推荐
已为社区贡献3条内容
所有评论(0)