The detailed process of Vue3 Cli creating a project.

Vue3 CLI detailed and complete project records (1. Create a project)

Disclaimer: Learning comes from official documents and search learning!
Disclaimer: If there are any errors or questions, please point them out!
Official Document Creation Project

Tool: vscoed (just an editor, cmd, webstorm, etc. are all available)
Knowledge points: You need a packaging tool NPM or Yarn. If Xiaobai recommends learning the basics of webpack and npm, if you don’t want to learn, go to the official website to install node here ( Baidu installation by yourself).

1. Environmental installation and inspection

Open the editor command line, cd to the project creation directory, enter node (integrated with npm), check the node version environment, if you have not installed node or Baidu to configure environment variables, the new version seems to be automatically configured, and it should be no problem to install directly.
Hahaha
Install scaffolding npm i -g @vue/cli, the installation process is relatively long, you can choose Taobao mirror source,
the installation will report a lot of warnings, just ignore it, you need to check the error report, I have a mistake and use Taobao mirror source instead!
Enter the command line vue -V, and the scaffolding version will appear.
insert image description here

2. Project creation

vue create 项目名称
insert image description here
After entering the command here, the configuration of the object to be selected shows the configuration created by many of my projects. We directly select the last Manually select features manual selection.
Here, manually select the required configuration.空格选择和取消,上下选择后回车下一步
insert image description here

Press Enter to select the next step,
insert image description here
insert image description here
save the project name and press Enter, it is OK! .
insert image description here

In this way, the project is built, and then follow the command prompt to cd into the project directory, run the serve service provided by webpack, and the page will pop up.
insert image description here
I encountered an error halfway, so the file name in the screenshot above is different~

3. Mention the mistakes encountered on the way

1.权限不足,就会导致以下问题。 以管理员运行cmd或者vscode编辑器即可。

Please add a picture description

2. npm run dev 报错

insert image description here

Open the configuration file and find that there is no dev in the created configuration, so you need to add it manually, just Baidu.
insert image description here

The next article writes the basic configuration of the project file, welcome to like and comment.

For reference only, if you have any mistakes or questions, welcome to consult.

Guess you like

Origin blog.csdn.net/weixin_44000173/article/details/119618207