1.下载并安装node.js

先从node官网下载并安装node.js,安装node.js的作用就是利用npm资源管理器下载插件等。
官网地址: https://nodejs.org/en/

把下载的.exe文件双击安装，一直下一步即可。

安装好的node试一下查看是不是安装成功,window键+r输入cmd进入系统管理器进入系统命令页面输入 node -v 检查是否安装成功

2.安装npm管理器

npm包管理器，是集成在node中的，所以安装了node也就有了npm，有了npm就可以去下载资源库文件，可以通过命令进行下载，先查看一下npm的版本号。

3.安装淘宝镜像(cnpm)

输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 耐心等待，没有报错就是成功的。

4.安装vue脚手架构建工具

输入:
cnpm install @vue/cli -g

输入：cnpm install -g vue-cli然后耐心等待安装…

完成后，环境搭建和准备任务就差不多了，现在就可以用vue-cli来创建项目。可以在一个空白的文件下创建使用，这样显着不是太乱，不然等你的项目创建出来之后也不知道放哪里了。

5.创建空文件夹放入vue项目

输入 md vueDemo 创建空文件夹
进入新目录 cd vueDemo

6.开始创建Vue-click项目

vue create vue-project

按 ↓ 选择“Manually select features”/手动配置，再按 Enter








这个项目的目录和结果（如果是第一次创建vue项目的话 没有node_modules这个依赖包，没有的话安装一下依赖就好了命令是:
cnpm install），我不是第一次创建vue项目所以node_modules会有的。

7.运行项目

在命令行输入
*cnpm install 安装项目的依赖包；
npm run serve 会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run serve 命令，其中的“run”对应的是package.json文件中，scripts字段中的serve，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

vue项目结构介绍:

8.相关三方插件的引入

既然我们选择了vue全家桶，那么我们肯定要用到vuex、axios、element-ui、sass
等插件，下面是安装以上插件的命令：
cnpm install element-plus -S 或者 vue add element-plus
初学者建议执行:cnpm install element-plus -S
等待下载插件

安装完成后，打开application.json文件，检查安装是否成功

用HBuiderX打开我们的项目，找到src目录下的main.js文件将其修改为：也就新增了3条语句用于引用element-plus

引入需要的包
　　cnpm install --save axios //主要用来发送请求，可理解为ajax
　　cnpm install element-plus -S //一个ui框架
　　cnpm install qs -S　　//包装传回后台的数据防止接收不到
　　npm install vue-router //vue路由
　　npm install @element-plus/icons-vue //icon图标

我安装了element-plus，axios，icon之后，修改后的main.js文件如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'

const app = createApp(App)
//配置axios成为vue的全局变量     vue Ajax的使用，全局配置axios
app.config.globalProperties.$axios=axios

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(ElementPlus).use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20