Table of contents
Vue development environment setup (Windows)
Method 1: vue-cli/init webpack scaffolding build tool creates project
Method 2: Use Vite to build a Vue project
Method 3: Use the graphical interface to build the project
For more technical points and questions, please leave a message for discussion in the background. Please pay attention to the public account CTO Plus for subsequent posts.
Vue is a popular JavaScript framework for building modern, responsive user interfaces.
Original text of this article: Vue Advanced: Introduction to the features and advantages of Vue, as well as several methods for setting up a development environment and constructing Vue3.0 projects
Vue.js is committed to building a data-driven web application development framework and is a streamlined MVVM. Vue.js focuses on the ViewModel layer of the MVVM model. Simple data operations can complete page updates. Of course, there are many similar frameworks, such as Angular and React, but Vue is deeply loved by enterprises and front-end developers for its simplicity, lightweight, data-driven, module-friendly and other advantages. , becoming an essential skill for front-end developers.
In the previous article of the public account CTO Plus , " Introduction and use of the most popular open source front-end framework vue-element-admin-4.4.0 for back-end management product development ", the front-end development framework developed using vue was introduced. When we We only need to download its software package, and then make simple environment configurations, and a high-end front-end page will appear in front of us. This is because these open source front-end frameworks have helped us implement many common functions. , we can quickly realize my product development by making simple modifications based on it according to our needs, allowing me to pay more attention to the implementation of business logic. So at the beginning of this article, I will introduce the most basic front-end development knowledge, and gradually dissect and advance some of the technologies used in these development frameworks, so as to make it more conducive to the growth and learning of novice developers.
Overview
Vue is a very popular JavaScript framework in the current front-end field. Its core idea is "responsive programming", making it easier for developers to build efficient, flexible, and easy-to-maintain Web applications.
Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer. It is a lightweight framework based on the MVVM structure and is very easy to integrate with other libraries or existing projects.
Advantages of Vue
I have summarized some of the advantages of Vue:
1. Easy to learn and use: Vue’s API is very simple and easy to understand, and developers can get started quickly.
2. Efficient: Vue’s virtual DOM technology makes page rendering faster.
3. Componentization: Vue’s componentization idea is very strong, making the code highly reusable and maintainable.
4. Responsive: Vue’s responsive programming idea allows data changes to automatically update the view, and developers do not need to manually operate the DOM.
Vue3 features
Vue has developed into two main versions: Vue 2 and Vue 3. Among them, Vue 2 will stop maintenance on December 31, 2023. Therefore, it is recommended that our latest projects use the latest Vue3. Next, I will summarize some of the functional features of Vue3. Regarding the differences between Vue2 and Vue3, you can pay attention to the article "Vue3 Advanced: Clarify some differences between Vue2 and Vue3 and between Vue.js and Node.js" behind the public account CTO Plus "Relationship", please stay tuned for subsequent articles.
Vue3 is the next major version of the Vue.js framework, which was officially released in September 2020. Compared with Vue2, Vue3 has many major improvements and optimizations, including:
1. Faster rendering speed and smaller package size: Vue3 improves performance by redesigning the internal architecture and replacing Object.defineProperty with Proxy. In addition, Vue3 also uses technologies such as Tree-shaking and Scope Hoisting to make the packaged files smaller.
2. Better type support: Vue3 introduced TypeScript and used TypeScript in the internal code of the framework to provide better type support. This makes it easier for developers to catch type errors when writing Vue3 applications. I will give a detailed introduction to the use of TypeScript later on the public account CTO Plus , so please pay attention to subsequent articles.
3. Better combined API: Vue3 introduces combined API, which is a new API style that allows developers to combine component logic more flexibly. Composable APIs also provide better code reuse and testability.
4. Better responsive system: The responsive system in Vue3 has been significantly improved compared to Vue2. The responsive system in Vue3 is implemented using Proxy, which makes the responsive system more efficient, scalable and maintainable.
5. Better plug-in management: The plug-in management system in Vue3 has also been improved. Plugins can now be registered directly as application options without using the Vue.use() method.
6. Better performance tracking: Vue3 introduces a new performance tracking API, making it easier for developers to analyze and optimize application performance.
7. Better component rendering: Component rendering in Vue3 has also been improved. Component rendering in Vue3 uses virtual DOM and introduces new features such as Teleport, Suspense and Fragments.
I will introduce these functions and features in detail later in the official account CTO Plus with examples. Please stay tuned for subsequent articles.
Basic use of Vue
The general steps for using Vue are as follows:
1. Install Vue: Just introduce Vue’s JS file into the HTML file.
2. Create a Vue instance: Use new Vue() to create a Vue instance and pass in an options object, including el, data, methods and other attributes.
3. Data binding: Use { {}} to bind data to the page. When the data changes, the page automatically updates.
4. Instructions: Vue provides a series of instructions, such as v-if, v-for, etc., to implement functions such as conditional rendering and loop rendering.
5. Event binding: Use the v-on instruction to bind events. For example, v-on:click means binding a click event.
6. Componentization: Use Vue.component() to create a component. The component contains a template and a props attribute to receive data passed by the parent component.
7. Life cycle: Vue provides a series of life cycle hook functions for performing specific operations at different stages of the component life cycle.
Next, I will introduce the installation of Vue and the three ways to build a Vue project. The official account CTO Plus will also combine two development tools Pycharm and VSCode to introduce the development and use of Vue. Please pay attention to the articles behind the official account CTO Plus . "Building a Vue3 Project Development Environment Based on Pycharm" and "Introduction to the Vue Project Integrated Development Environment Based on VS Code, and the Use of Other Development Gadgets", please stay tuned for subsequent articles.
Vue development environment setup (Windows)
Installing vue requires the help of the npm command set, so the node.js environment is generally installed first. Download the installation package from the nodejs official website. After installation, check the corresponding node and npm version information in the cmd command line window.
node -v // Display node version
npm -v// Display npm package manager version
However, what I recommend is to use nvm, a Node.js multi-version management tool, to install Node.js. nvm can be used to control different versions of Node.js environments on the same machine. For specific usage methods, please refer to the official account CTO Plus . Article: " Front-end development technology stack (tools): Win/Linux installation and use of the latest version of nvm in 2023 (details) "
Method 1: vue-cli/init webpack scaffolding build tool creates project
We first use vue-cli combined with webpack to build a basic vue project.
First install the vue-cli scaffolding build tool: npm install --global vue-cli
If you do not add the parameter --global, the command used is: npm install vue-cli
The following message will be prompted: vue-cli is not an internal or external command.
We will introduce why in the following articles about the use of npm. Please pay attention to the articles behind the public account CTO Plus .
Use the vue init command to create a project:
In the directory, run the command vue init webpack vue3_webpack
Among them, webpack is a build tool and module packager, that is, the entire project is based on webpack. Among them, vue3_webpack is the name of the project folder, which will be automatically generated in the working directory.
Just leave everything as default
After the installation is complete, start the service:
cd to our project folder vue3_webpack and run the command npm run dev
Run the application. This command will use hot loading to run our application. Hot loading allows us to see the modified effects in real time without manually refreshing the browser after modifying the code.
Open the browser to visit the page
Notice:
-
Vue.js does not support IE8 and below IE versions.
-
Dependent packages are configured in package.json.
A detailed introduction to the webpack tool and package.json configuration file will be introduced in the article behind the official account CTO Plus , so stay tuned.
Method 2: Use Vite to build a Vue project
Vite is the next generation web front-end development and construction tool. Vite is intended to provide out-of-the-box configuration, while its plug-in API and JavaScript API bring a high degree of extensibility and complete type support. Due to its native ES module import method, very fast cold server startup can be achieved.
In this chapter, I will introduce the use of Vite as a tool to build Vue projects. First, you can use Vite to quickly build a Vue project by running the following command in the terminal. The syntax format is as follows:
npm init vite-app <project-name>
Create project: npm init vite-app vue3_vite
Open a browser to access the service
A detailed introduction to the Vite tool will be provided in the article behind the public account CTO Plus , so stay tuned.
Method 3: Use the graphical interface to build the project
Vue provides us with a UI interface to build projects. We can use the vue ui command to open a graphical interface to create and manage projects:
Vue project manager
Create a project
You can also choose to cancel. If you choose to cancel, the project will not be built. Here we choose to cancel, which is relatively simple and will not be demonstrated.
Vue3 project packaging
Above we use the command npm run dev to start the service. We can use another command to package our project so that it can meet the conditions for deployment on the server. We execute the packaging command in the project root directory: npm run build
After the execution is completed, if no errors are reported, a dist directory will be generated under the Vue project. This directory generally contains the index.html file and the static directory. The static directory contains the static files js, css and the image directory images (if there are images) .
If you directly double-click to open index.html, the page may be blank in the browser. To display it normally, you need to modify the js and css file paths in the index.html file. Open the dist/index.html file and see that the css and js file paths are absolute paths. Just change the js and css file paths to relative paths.
Of course, we can also use the web server to specify this index.html file and access it through the web service. The deployment of the Vue project will be introduced in the following article of the public account CTO Plus , so stay tuned for subsequent articles.
References
Vue3 official website-Chinese website: https://cn.vuejs.org/guide/introduction.html
Vue3 official website-English website: https://vuejs.org/guide/introduction.html
vue3 Chinese website: https://cn.vuejs.org/
vue3 PI text: https://cn.vuejs.org/api/
Official website: https://v3.vuejs.org/
Chinese documentation: https://cn.vuejs.org/guide/introduction.html
Github address: https://github.com/vuejs/
Github address: https://github.com/vuejs/core
Recommended reading articles
"Front-end Development Technology Stack (Tools): Installation and Use of the Latest Vite in 2023 (Details)"
"Front-end Development Technology Stack (Tools): Installation and Use of the Latest Webpack in 2023 (Details)"
"Front-end Development Technology Stack (Tools): What are npm, pnpm and cnpm, and what are the relationships between them"
"Detailed explanation of the use and commands of npm tool for Vue/Node.js development tools"
Big front-end column
https://blog.csdn.net/zhouruifu2015/category_5734911 
https://blog.csdn.net/zhouruifu2015/category_5734911 Node.js column
https://blog.csdn.net/zhouruifu2015/category_5728369.htmlMore information· Search [CTO Plus] on the WeChat public account and follow it to get more information. Let’s learn and communicate together.
For a description of the public account, visit the following link
Recommended reading: