From zero to hero: Vue CLI makes you a master of front-end development (1)

foreword

"Author's Homepage" : Sprite Youbai Bubbles
"Personal Website" : Sprite's personal website
"Recommendation Column" :

★ Java one-stop service ★
★ Front-end cool code sharing
★ ★ uniapp-from construction to promotion ★
★ From 0 to hero, Vue's road to god ★
★ Solving algorithm, one column is enough ★ ★ Let's talk about architecture from 0 ★
★ The subtle way of data circulation ★

1 Introduction

1.1 The importance of front-end development

In today's digital age, front-end development plays an extremely important role in the Internet industry. With the popularity of mobile devices and the continuous improvement of user requirements for web experience, excellent front-end development can present users with beautiful, responsive and powerful web applications. Front-end development not only focuses on interface design and user interaction, but also needs to deal with data display, interface calling, performance optimization, etc. Good front-end development practices can improve user experience, increase user stickiness, and help

`Help enterprises gain a better competitive advantage.

1.2 Advantages of Vue.js

Vue.js is a popular JavaScript framework, which is favored by developers for its simplicity, ease of use, efficiency and flexibility. Vue.js provides a complete set of front-end development solutions, including data-driven view components, responsive data binding, virtual DOM and other functions, enabling developers to quickly build high-quality user interfaces. Vue.js also has the advantages of rich ecology, active community, and detailed documentation, making it an ideal front-end development framework.

1.3 The role of Vue CLI

Vue CLI is an official command-line tool based on Vue.js, aiming to provide developers with a complete and extensible Vue.js development environment. Vue CLI provides functions such as project creation, scaffolding, and build configuration, which simplifies the initialization and development process of front-end projects. Through Vue CLI, developers can quickly create a Vue.js project that meets best practices, and can be easily extended and customized. Vue CLI also integrates many commonly used plug-ins and tools, such as code packaging optimization, unit testing, end-to-end testing, etc., to help developers improve development efficiency and code quality.

Next, we will delve into the various functions and features of Vue CLI, and how to use Vue CLI
to become an efficient front-end developer. Whether you are just getting started with front-end development or have some experience as a developer, this article will reveal to you the power of Vue CLI and guide you on the best practices when using Vue CLI for project development
. By studying this article, I believe you will be able to start from scratch and gradually become a master of front-end development!

2. Introduction to Vue CLI

2.1 What is Vue CLI

Vue CLI (full name: Vue Command Line Interface) is a command line-based tool to help developers quickly build and manage
Vue.js projects. It provides a series of commands and configuration options to make creating, developing, building and deploying Vue.js applications easier and more efficient. Vue CLI
follows the principle of convention over configuration. Through the preset directory structure and default configuration, developers can get started quickly and customize according to their own needs.

2.2 Functions and features of Vue CLI

Vue CLI provides the following main functions and features:

a. Quick project initialization: Vue CLI can help developers quickly create a new Vue.js project through simple commands, including basic file and directory structures.

b. Plug-in system: Vue CLI supports the use of plug-ins. By installing and configuring plug-ins, you can expand and customize the functions of the project to meet individual needs.

c. Development server and hot reload: Vue CLI has a built-in development server, which can preview the modification of the project in real time during the development process, without manually refreshing the page.

d. Construction and packaging: Vue CLI provides powerful construction tools that can package projects into static files required by the production environment, including functions such as compression, code splitting, and optimization.

e. Configuration management: Vue CLI manages the construction and development process of the project through a set of easy-to-use configuration files (such as
vue.config.js), and can perform various custom configurations.

2.3 Install Vue CLI

  要开始使用 Vue CLI，首先需要安装它。以下是在全局环境中安装 Vue CLI 的步骤：

1. Make sure you have Node.js and npm installed. You can verify its version by running the following command on the command line:

 node -v
 npm -v

2. Install Vue CLI using npm. Run the following command at the command line:

 npm install -g @vue/cli

3. Once installed, you can verify that Vue CLI installed successfully by running the following command:

vue --version

After the installation is complete, you can use Vue CLI to create and manage Vue.js projects.

3. Create and manage projects

3.1 Create a new project using Vue CLI

To create a new project with Vue CLI, you need to have Node.js and npm installed first. Here are the detailed steps:

1. Open a command line terminal (eg: Command Prompt on Windows or Terminal on Mac).

2. Run the following command to install Vue CLI (skip this step if Vue CLI is already installed):

   npm install -g @vue/cli
   

   -gInstall Vue CLI as a global package via flag so you can access it from anywhere.

3. On the command line navigate to the directory where you want to create the project.

4. Run the following command to create a new Vue project:

   vue create <project-name>
   

   Replace <project-name>with the name you want to give your project.

5. When creating a project, you may be asked to select a preset configuration, such as default configuration (Default), manual configuration (Manually select features), etc. Choose according to your needs and follow the prompts to complete the setup.

6. Once setup is complete, Vue CLI will automatically download the required dependencies and create the project file structure.

3.2 Analysis of project structure

After creating the Vue project, a default project structure will be generated. Here are some important files and folders:

• src: This folder contains the source code for the project.
  • assets: store static resource files, such as pictures, fonts, etc.
  • components: Store Vue components, which can be organized and nested as needed.
  • views: Store page-level Vue components.
  • App.vue: The root component is the entry point of the entire application.
  • main.js: The main entry file, used to initialize Vue instances and configure plugins, etc.
• public: This folder contains public static files such as HTML templates, icons, etc.
• node_modules: This folder contains third-party libraries and plugins that the project depends on.
• package.json: The project's configuration file, which contains the project's metadata, list of dependencies, and more.

3.3 Manage dependencies and plugins

In a Vue project, you can use npm or Yarn to manage dependencies and plugins. Here are some common operations:

• Install dependencies: To install new dependencies, you can use one of the following commands:

  npm install <package-name> --save
  

  or

  yarn add <package-name>
  

  will be <package-name>replaced with the package name to install. --saveoption to add dependencies to the section package.jsonin the file dependencies.

• Upgrading dependencies: To upgrade installed dependencies, you can use one of the following commands:

  npm update <package-name>
  

  or

  yarn upgrade <package-name>
  
  
  将`<package-name>`替换为要升级的包名称。
  
  

• Installing plugins: To install a Vue plugin, you can use one of the following commands: (Replace <plugin-name>the with the name of the plugin you want to install. --save-devOptions section that adds the plugin to package.jsonthe file devDependencies.)

  npm install <plugin-name> --save-dev
  
  
  yarn add <plugin-name> --dev
  
  
  
  
  

3.4 Project configuration and options

Vue CLI provides many project configuration options that you can customize according to your needs. Here are some common configuration files and options:

• babel.config.js: Babel configuration file, used to configure the JavaScript compiler.
• vue.config.js: Vue CLI configuration file for customizing the build process, proxy settings, etc.
• eslintConfig: ESLint configuration file, used to configure code style specification and static code analysis.
• postcss.config.js: PostCSS configuration file for post-processing CSS.
• public/index.html: HTML template file, used to generate the entry HTML of the application.
• src/main.js: The main entry file, used to create Vue instances and configure global plugins, etc.
• src/App.vue: The root component file, which is the entry component of the entire application.
• src/components: The folder where Vue components are stored, where you can create and organize custom components.
• src/assets: Folder for storing static resource files, such as pictures, fonts, etc.

These files and options provide flexible configuration and extensibility of the Vue project, and you can customize and modify according to your needs.

4. Development and debugging

4.1 Development mode and production mode:

Development Mode and Production Mode are two commonly used working modes in the software development process.

In development mode, features such as hot reloading, debug information output, etc. are usually enabled so that developers can more easily modify and debug code. Applications in this mode may run slower, but it provides more development aids and real-time feedback.

While in production mode, optimization and performance are key considerations. Applications in this mode usually remove debugging information, disable hot reloading and other development-time auxiliary functions to improve performance and reduce resource consumption.

Detailed code snippet: Usually, you can switch between development and production modes by setting a flag in the configuration file or code. For example, in a configuration file named config.js, you can define a variable isDevModeto indicate whether you are currently in development mode:

// config.js

const isDevMode = true;

module.exports = {
    
    
  isDevMode: isDevMode,
  // 其他配置项...
};

Execute the corresponding logic in the code according to the value of the variable, such as printing debugging information in development mode:

// app.js

const config = require('./config.js');

// ...

if (config.isDevMode) {
    
    
  console.log('Debug information...');
}

4.2 Development server and hot reload:

A Development Server is a local server used to run and test applications during development. It usually has a hot reload feature, which automatically reloads the application after a code modification is saved, so that the developer can immediately see the effect of the change.

A common development server is Webpack Dev Server. Here is a simple configuration example:

// webpack.config.js

module.exports = {
    
    
  // 其他配置项...

  devServer: {
    
    
    contentBase: './dist',
    hot: true,
  },
};

The configuration above sets the development server's root directory to ./dist, and enables hot reloading.

devServerDetailed code snippet: By setting objects in the Webpack configuration file , you can configure various options for the development server. In the above example, contentBasethe root directory of the server was specified, here it is ./dist. hotoption enables hot reloading.

4.3 Debugging tools and techniques:

During development, debugging tools and techniques are essential to quickly locate and resolve problems. Here are some common debugging tools and techniques:

• Browser developer tools: Modern browsers provide powerful developer tools, including debuggers, network monitoring, performance analysis, and more. By opening the developer tools in the browser, you can inspect web page elements, view network requests and responses, debug JavaScript code, and more.

• Log output: use console.log()or other log output methods to output variable values, debugging information, etc. at key positions. These outputs can help you understand the execution flow of your code and find possible sources of problems.

• Breakpoint debugging: Set a breakpoint in the IDE (Integrated Development Environment) or browser developer tools to stop the program at a specific location. Once the program hits a breakpoint, you can step through the code and view variable values ​​to gain a deeper understanding of how the code is functioning.

4.4 Build and deploy:

Build and deploy is the process of getting an application ready and releasing it to production. Here are some key concepts and techniques, along with related code snippets:

4.4.1 Construction process:

The build process (Build Process) is the process of converting source code into executable files or deployment packages. During the build process, code compression, file merging, resource optimization, and more can be performed to reduce file size and improve performance.

Common build tools include Webpack, Gulp, and Grunt. These tools automate a series of build tasks based on configuration files.

Detailed code snippet: The following is an example configuration file webpack.config.js for building with Webpack:

// webpack.config.js

const path = require('path');

module.exports = {
    
    
  entry: './src/index.js',
  output: {
    
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    
    
    rules: [
      // 其他加载器规则...
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  // 其他配置项...
};

The above configuration file specifies the entry file as ./src/index.js, the output file as bundle.js, and the output path as ./dist.

4.4.2 Deployment process:

The deployment process (Deployment Process) is the process of publishing the built application to the target server or cloud platform. During the deployment process, tasks such as server configuration, environment variable settings, and database migration need to be considered.

Common deployment methods include manual deployment, automated deployment using scripts, and automated deployment processes using continuous integration and continuous deployment (CI/CD) tools.

Detailed code snippet: The following is a simplified example of an automated deployment script that uses Node.js and SSH modules to connect to a remote server and upload the built application file to a specified directory:

// deploy.js

const ssh = require('ssh2');
const fs = require('fs');

const config = {
    
    
  host: 'example.com',
  port: 22,
  username: 'user',
  privateKey: fs.readFileSync('/path/to/private-key'),
};

const conn = new ssh.Client();

conn.on('ready', () => {
    
    
  conn.sftp((err, sftp) => {
    
    
    if (err) throw err;

    const localPath = './dist/bundle.js';
    const remotePath = '/var/www/html/bundle.js';

    sftp.fastPut(localPath, remotePath, (err) => {
    
    
      if (err) throw err;

      console.log('Deployment complete.');

      conn.end();
    });
  });
});

conn.connect(config);

The above script uses the SSH module to connect to the remote server, and uploads the local bundle.jsfiles to the directory of the server through the SFTP protocol /var/www/html. When finished, output a prompt message and close the SSH connection.