Vue-cli scaffolding tool usage and project configuration instructions

Vue-cli scaffolding tool usage and project configuration instructions

With the continuous development of front-end technology, front-end frameworks have attracted more and more attention from developers. As a leader in front-end frameworks, Vue.js has been widely used in the development of various web applications. Vue-cli is a command line-based scaffolding officially provided by Vue.js. It can help developers quickly initialize the Vue.js project structure, allowing us to focus more on business development. This article will introduce the installation and use of Vue-cli, as well as basic project configuration.

1. Install Vue-cli

If you have not installed Node.js, then you need to install Node.js first. Please search for how to install Node.js yourself.

After installing Node.js, enter the following command on the command line to install Vue-cli:

npm install -g vue-cli

This command will install vue-cli in the global environment.

Note: If insufficient permissions occur during the installation process, please use the sudo command or run the command line as an administrator.

2. Use Vue-cli to create projects

After installing Vue-cli, we can start using it to create projects. Enter the following command on the command line to create a Vue.js project based on the webpack template:

vue init webpack my-project

After this command is executed, you will be asked some questions, such as project name, project description, author, etc. You You can fill it out according to your own needs. Once filled out, it will create a project template for us.

Installing dependencies:

npm install

After executing the above command, the dependencies will be installed from package.json.

Run the project:

npm run dev

3. Basic project configuration

1. Project structure

• build: Project building and packaging related Configuration folder
• config: project configuration folder
• node_modules: project dependency package folder
• src: project code folder, including components, templates, static resources, etc.
• static: Project static resource folder, such as pictures, fonts, etc.
• test: Project test folder
• .babelrc: Babel configuration file
• .editorconfig : Code style configuration file
• .gitignore: Git version control ignore file
• .postcssrc.js: PostCSS configuration file
• index.html: Project page entry file
• package.json: Project configuration file

2. Environment variable configuration

Different environment variables can be set in the project, such as development environment, test environment and production environment. Vue-cli provides three environment modes by default: development (development environment), testing (test environment) and production (production environment).

In the config folder under the project root directory, there is an index.js file, which contains configuration information for various environments. We can modify the corresponding configuration information as needed.

For example, we can set different API addresses for the development environment and production environment in the index.js file:

module.exports = {
  // 开发环境
  dev: {
    env: require('./dev.env'),
    port: 8080,
    api: 'http://localhost:3000'
    ...
  },
  // 生产环境
  build: {
    env: require('./prod.env'),
    api: 'http://api.example.com'
    ...
  }
}

In the code we can pass process. env.NODE_ENV to get the current environment and the corresponding API address:

const API_URL = process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/api/'

3. Vuex

Vuex is a state management model specially developed for Vue.js applications. , can be used to manage global status, such as login status, language, theme, etc.

When creating a project template, you can choose whether to use Vuex, and you can add or remove Vuex at any time in the project.

Install Vuex:

npm install vuex --save

To use Vuex in the project, you first need to introduce Vuex in the main.js file and register it in the Vue instance:

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

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

Next, create a new store directory under the src directory, and write the status management of each module in this directory.

For example, we need to manage a module that stores login status in the project:

export default {
  state: {
    isLogged: false,
    user: {}
  },
  mutations: {
    SET_LOGIN_STATUS (state, payload) {
      state.isLogged = payload.isLogged
      state.user = payload.user
    }
  }
}

When we need to use this status management, we can obtain and modify the status in the following ways:

// 获取状态
this.$store.state.isLogged

// 修改状态
this.$store.commit('SET_LOGIN_STATUS', {
  isLogged: true,
  user: {
    name: 'Tom',
    age: 18
  }
})

Summary

Vue-cli provides out-of-the-box scaffolding functionality to help us quickly build and develop Vue.js projects. This article introduces the installation and use of Vue-cli, as well as basic project configuration, including project structure, environment variable configuration, Vuex, etc. I hope this article can help you use Vue-cli better and develop better web applications.

The above is the detailed content of Vue-cli scaffolding tool usage and project configuration instructions. For more information, please follow other related articles on the PHP Chinese website!