Get best of the week

VueJS开发人员的基本设置

从基础开始


您是否曾经想过开始编写自己的单页Web应用程序？您是否注意到以下事实：您的忠实伴侣目前有三个基本申请者？它们各自以其自己的方式是唯一的，并具有许多优点。


例如，Angular具有大量现成的功能，React允许您非常灵活地自定义自己的环境，而VueJS以其对复杂事物的抽象而闻名。您应该选择哪一个？该业务纯粹是个人业务，取决于项目构想和任务。


单页应用程序？这很美味？


是的，当然，它们非常可口，并且具有严格的特定口味，具体取决于所选择的技术。因此，例如，本文中考虑的技术使您可以感受到宜人的生活和低调的淡淡感觉。


更严重的是，这种应用程序使我们（作为开发人员）可以实现网站各组成部分之间更大的互连性。这听起来不错，但是对最终用户有什么好处？这里有很多变量。因此，例如，值得注意的是该界面的出色响应能力，几乎可以立即加载页面等等。


VueJS简单吗？我不知何故


它比最接近的堆叠邻居容易学习一百倍。一个给定的事实主要是通过庞大的体系结构解决方案层实现的，该体系结构解决方案使您不必被许多内部细节所分散。也许这是一次性使用这项技术。


图片


好。那从哪里开始呢？手已经发痒了


-, VueJS . . ? .



. , , ? . . .


<!--   . Dev- -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--  .    -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>


, , . VueJS, . ? . - Node.js npm/yarn.


#  npm
npm install -g @vue/cli

#  yarn
yarn global add @vue/cli

#   .      .
vue create appname
# ,    GUI, :
vue ui

, yarn Linux .


# ~/.bashrc  bash
# ~/.zshrc  zsh

export PATH="/home/username/.yarn/bin:$PATH"


, . ? , - , ? .


, :


  1. assets — .
  2. components — vue-. , .
  3. router — . url .
  4. store — VueJS, .
  5. views — router, .
  6. App.vue — . .
  7. main.js — . , .


// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //  
  state: {
    Title: 'Tested',
    MenuTitle: ['', ''],
    Number: 30
  },
  //     
  mutations: {
    Title: (state, value) => state.Title = value,
    MenuTitle(state, value) {
       state.MenuTitle.append(value);
    }  
  },

  //  mapState.       .  
  getters: {
    NumberTest(state) {
       return state.Number * state.Number;
    } 
  }
})

<!- -App.vue -->
<template>
  <!-- Template        .     <template>   -->
  <div id="app">
    <Menu></Menu>
    <router-view></router-view>
  </div>
</template>

<script>
  //   Menu
  import Menu from './components/Menu'
 //  mapState       store
  import { mapState } from 'vuex';

  export default {
    name: 'HelloWorld',
    // .      template
    components: {
      Menu
    },

    // Computed -  .   .
    computed: mapState([ 'Title' ]),

   // Watch -         .
   // --> , ,        Title
    watch: {
      Title(value) { document.title = value; } 
    },
  //    . Created     .
  created() {
      document.title = this.Title;
    }
  }
</script>

<style lang="css">

</style>


<template>
  <!--v-if -            true/false. -->
  <ul v-if="Number > 30">
    <!-- v-for -        .      3 .      this.$store.commit('MenuTitle', 'value3') -->
   <!-- v-bind -   .      style (  ). -->
   <!-- {{ element }} -         html. ,           -->
    <li
    v-for="(element, index) in MenuTitle"
    v-bind:key="index"
    >{{ element }}</li>
  </ul>
  <!-- v-else -      ,  v-if  false -->
  <h1 v-else> Number  30 <h1>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'mainMenu',
    computed: mapState({
      MenuTitle: (state) => state.MenuTitle,
      Number() {
        return this.$store.getters.NumberTest;
      }
    }),
    created() {
       this.$store.commit('MenuTitle', 'value3');
    }
  }
</script>

<!-- scoped -    css-   -->
<style lang="css" scoped>

</style>


<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ', Vue!'
  }
})

. ?


为什么这里只有应用示例？创建这篇文章的目的是给感兴趣的人一些动力。向他们提供在自己的项目中使用技术的最简洁的示例。更详细的文章至少会涉及10节课。


尽管此处描述的技术相对于堆叠中的最老的技术而言是最简单的，但它仍然具有综合性，并且存在瓶颈，应单独拆卸。

More articles:


All Articles