Vue create front-end project

First go to the node.js official website (nodejs.org/zh-cn/), download the installation package, and run the installation directly. After the installation is complete, you will have the node and npm environment.

Use node -v
npm -v to see if the installation is successful

node -v
npm -v

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm i -g @vue/cli

Install vue-cli 3.0, there will be vue ui command, after installing Vue3.0, use the command vue ui

# 打开vue的可视化管理工具界面
vue ui

Then the browser visits localhost:8000

and clicks create. The created directory is at the same level as running vue ui. Then click the button [Create a project here]

, enter the project name "blog-vue" in the project folder, click Next,

tick the manual configuration project, and then click Next.

Check the routing Router, state management Vuex,

turn off the check of js, and then click Next to
open Use history mode for router, and then click Create project.

Select [Create project without saving preset], the vue project is created successfully.
Then we use WebStorm to open the project.

The purpose of components, such as the head, the left toolbar, the tail, and these common parts, are extracted and placed in the component.
The router is used to configure routing. The
store is the place for data state management. If the child component is updated, other components will be notified. All components will listen to the store. So once a component changes, it will notify other components of data synchronization.

Install element-ui and introduce the element-ui component (element.eleme.cn), so that we can get good-looking vue components.

# 切换到项目根目录
cd blog-vue
# 安装element-ui
cnpm install element-ui --save

Then open main.js in the project src directory and introduce element-ui dependency.

Install axios (www.axios-js.com/), axios is a promise-based HTTP library

cnpm install axios --save

Then we also introduce axios globally in main.js.

import axios from 'axios'
Vue.prototype.$axios = axios 

In the package.json file, elementui and axios appear, which means the introduction is successful.