VUE front-end project initialization

One, the initialization steps of the front-end project

1. Install Vue scaffolding (take vue-3 as an example)

2. Create a project through Vue scaffolding

3. Configure Vue routing

4. Configure Element-UI component library

5. Configure the axios library

6. Initialize the git remote warehouse

7. Host the local project to the cloud warehouse (code cloud as an example)

Two, install vue-3

You can install it with the following command. Use npm to install. You need to download and install Node.js in advance.
Node version requires
Vue CLI. Node.js 8.9 or higher is required.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

If you have installed the x1 and x2 versions in advance, you can use the following command to uninstall it

 npm uninstall vue-cli -g 
 #OR
 yarn global remove vue-cli 

View VueCli version

vue --version

Three, use the vue visual panel to create a project

Four, routing configuration

Open cmd and enter the following command to enter the visualization panel

 vue ui

Select the folder and click Create Project to start the creation. After the
Insert picture description here
name project is created,
start manual configuration-check the function (Babel, Router, linter/Formatter, use configuration file)-turn off the routing, linter/Formatter Select (ESlint+standard.config)-create a project and click on it

Five, install the element component library

Click plug-in-add plug-in-search for element to install it
Insert picture description here
. After installation, the configuration plug-in will pop up. The default is to import all the plug-ins (fully import) and change it to import on demand . Just click to complete the installation

Six, configure axios network request

Click Install Dependency in Dependency, search for axios to install (install to run dependency)
Insert picture description here

Seven. Initialize git remote warehouse

**** Note that you need to install the Git software in advance, otherwise the Git command will not display internal or external commands in the cmd command
1. Click Personal Center-Settings-SSH Public Key
2. Generate Public Key
Generate Public Key Help Link
3 .Follow the steps
Insert picture description here

8. Remotely connect to the warehouse

	1.新建仓库,创建名称
	2.使用readme文件初始化这个仓库这个勾选去掉
	3.点击创建就可以了
	4.创建好了后,会出现三个代码片段为正常
	5.将全局设置中的两行命令在cmd中输入,去配置
	6.我们已经创建好了项目后,选择最下面的代码片段,复制第二个命令
	7.打开刚刚创建好的项目文件  按shift+右键  打开 powershell   打开输入git status  
	8.在输入git add.  存入暂存区 
	9. 再输入 git commit -m "add files”,在本地做一次提交
	10.再次 git status 
	11.复制刚刚在创建项目好了后  最下面的代码中的第二个命令行 按下回车
	12.在去执行第三行命令
	13.此时会弹出一个窗口,需要输入码云的账号和密码(第一次)
	14.代码的上传就可以了,点击刷新就可以了

Guess you like

Origin blog.csdn.net/weixin_45054614/article/details/104836180