foreword
The content of this chapter is the construction of the VUE front-end environment and the discussion of related front-end technologies.
Next article address:
Vue 3: Play with web front-end technology (2) - Lion King's Blog - CSDN Blog
1. Environment construction
1. Install Node.js
Vue is based on Node.js, so Node.js needs to be installed first. Official website address: Node.js
2. Install Vue CLI
Vue CLI is a scaffolding tool for quickly building Vue projects. You can enter the following command to install Vue CLI globally:
npm install -g @vue/cli3. Create a Vue project
In the command line tool, create a new Vue 3 project with the following command:
vue create my-project4. Configure the Vue project
After creating the project, Vue CLI will ask you about some configuration options, just press Enter to use the default configuration.
5. Start the development server
After the project is created, go to the project folder:
cd my-projectThen start the development server with the following command:
npm run serve6. Access the development server
According to the prompt, enter the URL in the browser:
7. Development environment
Use VScode for development. Official website address: https://code.visualstudio.com/
2. Discussion on front-end related technologies
1. Do I have to use vue-cli?
You can not install it, but it is more troublesome to configure the project. There are pros and cons to using this integrated tool. The good thing is that you can understand the configuration items and increase your technical background; the bad thing is that the efficiency is not high and it is uncomfortable to use. And this series of articles will be cool articles. If you want to be cool, you can use various tools directly, and it is not too late to study when necessary.
In fact, Vue 3 no longer recommends the use of scaffolding. First, the startup speed of the service is slow, which leads to low debugging efficiency (the larger the project, the more obvious it is); the second is that there are better alternatives. For details, see Vue related documents: Introduction— Vue.js. _
2. npm and cnpm
npm is an official package management tool provided by Node.js for installing, updating and uninstalling Node.js modules.
cnpm is an npm mirroring tool developed by the Taobao team, which aims to solve the problem of slow download speed of npm in China.
The way to use cnpm and npm is basically the same, both can install, update and uninstall modules through command line tools.
If you use npm to download slowly in China, you can consider using cnpm instead of npm. However, in some special cases, you may still need to use npm, such as services that cnpm cannot run, but npm can run.
3. Why choose Vue
In fact, it’s all right. A real front-end development needs not only to know Vue, but also to know some mainstream front-end frameworks. I just want to play around and believe that programming in different programming languages can be figured out, so there will be a series of articles.
4. Why choose VScode
In fact, it’s all right, open source is free, many people use it, the ecology is good, there are ideas, just choose a development environment that is convenient, no need to tangle.
5. What are the front-end technologies?
This is too much, in the increasingly updated technology, it is simply impossible to learn. HTML, css, js and other basics always need to know a little bit, anyway, I can’t escape, I usually don’t memorize these, just check the documentation when I need it, even if I memorize it soon, I will forget it, because it’s not that kind of professional front-end technicians.
6. How should we learn VUE
VUE officially recommends mastering the basic front-end technology before learning, so you can follow the steps below:
(1) Familiar with HTML, CSS and JavaScript: Vue.js is a framework based on JavaScript. To learn Vue.js, you first need to have a certain understanding of these basic front-end technologies.
(2) Understand the core concepts of Vue.js: Vue.js has some core concepts, including components, templates, and life cycles. Figuring out these concepts is very important to understanding and using Vue.js.
(3) Install Vue.js: You can import Vue.js by downloading the source code of Vue.js, or directly using CDN. In addition, you can also use Vue CLI to quickly build Vue.js projects.
(4) Create a Vue instance: The core of Vue.js is a Vue instance, you can build your application by creating a Vue instance. When creating an instance, you need to specify some options, such as mount point, data, etc.
(5) Learn Vue's instructions and template syntax: Vue.js provides some instructions for manipulating DOM and binding data. When learning Vue.js, it is very important to master these instructions and understand template syntax.
(6) Understand the component-based development of Vue: Vue.js is a component-oriented framework, and the code can be made more modular and reusable through component-based development. Learning how to create and use components is an important step in mastering Vue.js.
(7) Master the life cycle of Vue: Each component of Vue.js has a life cycle, and these life cycle hook functions can perform some operations in different stages of the component. Understanding and using lifecycle functions is very useful for working with component behavior and data.
(8) Learn Vue's state management: When the application becomes complex, it can become difficult to manage the state between components. Vue.js provides Vuex as a state management tool, learn how to use Vuex to better manage and share state.
(9) Exercises and project practice: Through exercises and actual project practice, you can deepen your understanding and application of Vue.js. Try building some small projects with Vue.js to reinforce what you've learned.
However, this series of articles will not involve HTML, CSS, and JavaScript directly, but indirectly, and we will talk about it when we use it.