Article directory
Published simultaneously on my personal site: http://www.panzhixiang.cn/article/2022/10/17/55.html
foreword
In fact, it is not an introduction, because I have been using vue for a while, but I have been writing some simple pages and components before, but I don’t know how vue is set up as a whole. This time, it is mainly to sort out this part. Content, by the way, write a note from beginning to end to summarize.
A lot of content in the notes is based on a video of an UP master on station B, and the link is pasted. If you are interested, you can watch it: Vue project actual combat
Development Environment Introduction
I am connected to WSL through VS code on windows11. WSL is an ubuntu 20.04 system, so my development environment is VS code + ubuntu.
This is also the development environment in my work, because it is more convenient to develop on ubuntu than windows, especially in terms of command line operations, but ubuntu cannot meet the needs of daily work software, because many work software does not have ubuntu version , so the windows11+WSL mode is quite good, I recommend everyone to try it.
The npm and node versions are as follows:
$ npm -v
8.13.2
$ node -v
v14.19.1
Create a vue3 project framework
You can refer to the official website of vue3: Create a Vue application
Execute the init command first
$ npm init vue@latest
After execution, some configurations will gradually appear for us to choose. It is recommended that novices only configure "Project name", and choose NO for others. The following is my configuration.
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue3-notes
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
Scaffolding project in /home/zhixiang_pan/learningspace/vue_study/vue3-notes...
Done. Now run:
cd vue3-notes
npm install
npm run dev
I set the Project name to vue-notes, which will generate a vue3-notes directory in the current path.
After configuration, go to the vue3-notes directory (that is, the path you entered in the project name option) to execute npm install(install the necessary dependencies) and npm run devto run a vue3 sample application locally.
At this point, the creation of a vue3 project has been completed.
Directory structure explained
After creating the Vue3 project and installing dependencies and running the local environment for the first time, the directory structure in the project should be as shown in the following figure:
Here is a brief explanation of several directories and files that will be used later.
- src
The src directory is the general directory where the source code is stored. Generally speaking, the code related to Vue will be placed in src - components
There is a concept of components in vue3, which is to extract reusable code and package it into a component separately, so that it can be called by different places. The components directory is used to store these components. - App.vue
can simply understand App.vue as a root component, that is, all pages in vue will use this component. In other words, any page refresh will call the code in App.vue. - main.js
can be simply understood as the entrance of the entire site, and the entire Vue project starts to run from here, so some configurations and codes that affect the overall situation are generally placed here.
There are also some other files and directories, which have little impact on the understanding of vue3 entry, so I won’t say more. If you are interested, you can go to the official website to have a look.