How to build a front-end project vue

As the trend of separation of front-end and back-end becomes more and more obvious, there are more and more front-end frameworks. Among them, Vue.js is a relatively simple and easy-to-use framework, and is welcomed by many front-end engineers. In this article, we will introduce how to build a front-end project using Vue.js.

1. Create a project

Use Vue CLI to quickly create a Vue project. Vue CLI is a command line tool that can help us quickly build a Vue.js project structure. We can create a new Vue project by running the following command:

vue create my-project

Then configure the project according to the options. Among them, we need to select the plug-ins and related configurations that need to be introduced. For example, we will be asked which plug-ins we need to install, such as router (vue-router), vuex (state manager), CSS preprocessor, etc. Once configured, Vue CLI will automatically create the project structure based on our selections.

2. Writing components

The core idea of ​​Vue.js is the idea of ​​componentization, and everything is componentized. Therefore, we need to write components to build Vue projects. Components are reusable code blocks, which greatly reduces code redundancy and improves code reusability.

We can create a component under the /src/components folder, for example, create a HelloWorld.vue component.

<template>
  <div>
    <p>{{msg}}</p>
    <input v-model="text">
    <p>{{text}}</p>
    <button @click="onClick">点击</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'hello world',
        text: ''
      }
    },
    methods: {
      onClick() {
        alert('clicked')
      }
    }
  }
</script>

This is a very simple Vue.js component. The template uses template syntax, including interpolation expressions, instructions, etc., and also includes corresponding JavaScript code.

3. Using components

To put it bluntly, a component is a Vue instance. This Vue instance can be "used" in the templates of other Vue instances. In Vue, we can use this component through the <template> tag.

The HelloWorld component we just created can be introduced in App.vue.

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
</script>

In the above code, we need to introduce the component first and use this component in the template.

4. Vuex state management

Vuex is a library specially used to manage the state (data) in Vue.js applications. In a more complex project, if there are too many states, management will become very troublesome. Using Vuex to manage state allows us to better maintain this state and share it between different components.

We need to install Vuex in the project:

npm install vuex --save

Next create a store.js file:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({commit}) {
      commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

This is a simple Vuex store (state), including state (state), mutation, action and getters, respectively corresponding to data storage, data modification, asynchronous operation, data acquisition and other operations.

After creating the store.js file, we need to inject it into the Vue instance:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

At this time, we can access the Vuex in the component status.

5. Using routing

In Vue.js, we can use vue-router to manage routing. We can create an index.js file in the /src/router folder to implement routing management.

We need to install vue-router in the project:

npm install vue-router --save

Next write the route:

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Then introduce the above route into the Vue instance:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

In this way, we can use routing in the project.

6. Summary

This article introduces how to use Vue.js to quickly build a front-end project. Steps such as creating a project structure through Vue CLI, writing components, using Vuex to manage status, and using vue-router to manage routing provide beginners with a relatively clear process for building a project. Of course, this is just an introduction to Vue.js. In actual project development, there is still a lot of knowledge and skills that need to be mastered. I hope this article can help you get started with Vue.js, and also hope it can help you understand Vue.js more deeply.

The above is the detailed content of How to build a front-end project vue. For more information, please follow other related articles on the PHP Chinese website!