Article directory
view-cli
introduce
Vue-cli scaffolding, as the name suggests, is the shelf for building things, which is also a tool for building large-scale projects.
During the development process, programmers will hot-update the view to improve development efficiency.
Preparation
- 1 The vue-cli command is based on node.js, so you need to install node.js first
- 2 Check if node.js is installed, just window + R to open the run dialog box, enter cmd to open the command line window
- 3 Enter node --version in the window, and the pop-up version number indicates that it has been installed
node --version
- 4 If it is not installed, please click here>> Because there are already many detailed tutorials on the Internet, I won’t say much here
Install vue-cli
- 1 After confirming that node.js is installed
- 2 Re-open the cmd command window and enter: npm install -g @vue/cli to install vue-cli globally
npm install -g @vue/cli
This completes the installation of vue-cli
create project
- 1 Graphical interface creation
(1) Step 1, create the folder where the Vue project is located
(2) Step 2, open cmd in the folder
(3) Step 3, enter the vue ui command to open the graphical interface
without going into details
vue ui
- 2 Command line creation details
command line creation
- The up and down keys can adjust the options, the space bar selects or cancels the enter key, and the next step
possible problems
- If you create it for the first time, you should encounter problems. The up and down keys cannot select the function normally.
Find the ~/.bashrc (such as the default path: C/Program Files/git/etc/bash.bashrc) file and open the file (vscode /Notepad can be opened). Add alias vue='winpty vue.cmd' at the end. You will need to restart your Git Bash terminal session for the updated bashrc file to take effect. )
Official website tips>>
alias vue='winpty vue.cmd'
officially created
After understanding the possible problems and solving the problems, start to create the first vue project
- 1 Enter the command to create a project vue create test_02, test_02 is the project name
vue create test_02
- 2 The pop-up content is vue2 default creation vue3 default creation and self-selection functions are basically self-selective creation projects
- 3 Select the function to choose as needed, such as router vuex
- 4 Select version 2.x is vue2 version 3.x is vue3 version on demand
- 5 Whether the router uses the history mode is selected on demand (there are two modes of routing/hash, I often use hash selection n routing mode introduction >> )
- 6 Where to put the configuration of Babel, ESLint, etc. Two options 1 Open separately 2 Unified package
- 7 Whether to save for future project configuration is generally n because the requirements may be different.
After the above 7 steps are completed, wait for the installation package to download and appear similar to the following cd test_02 / npr run serve , etc.
Congratulations, your first vue project has been born At this point, you can enter cd test_02
in the input box to enter the project , then enter npm run serve and press Enter. What you have to do at this time is to wait for the project to start. When you see http://localhost:8080 , the project has started and it is waiting for you presence
Copy http://localhost:8080 as shown above to the browser and press Enter to see how the project starts
You can also pull the project file into the vsCode editor and start it on the terminal
, so vue-cli creates a complete project and it’s ok
end of article
testimonials
Thank you for your patience in reading. If you have any deficiencies, please correct me.
In the long river of Vue, we travel together so that we have a common goal. I
wish you every step of the way!