Vue2.x项目创建

目录

1. 安装node.js

2. 安装 vue 环境

2.1 安装 vue2

2.2 安装vue-cli

2.3 安装webpack

2.4 安装webpack-cli

3. 创建项目

3.1 创建命令

3.2 创建时选项

4. 运行

5. 引入Element-UI

5.1 安装element-ui模块

5.2 引入element-ui

​5.3 测试

5.3.1 清空首页内容

5.3.2 添加element-ui按钮测试

---

1. 安装node.js

官网：Download | Node.js

下载window64位安装包，安装时除自定义安装路径外默认即可

安装后查看版本

node -v
npm -v

2. 安装 vue 环境

2.1 安装 vue2

vue@版本号可指定安装版本，如下为指定vue2.7版本，不加@版本号，则默认安装最新版vue（最新版是vue3.x）

npm install -g vue@2.7

2.2 安装vue-cli

# 默认安装最新版，vue-cli对应vue2，@vue/cli对应vue3
npm install vue-cli -g

安装完成后查看版本

vue --version

2.3 安装webpack

npm install -g webpack

2.4 安装webpack-cli

npm install -g webpack-cli

3. 创建项目

3.1 创建命令

# vue2创建并初始化项目
vue init webpack 项目名称

3.2 创建时选项

截图源于如何创建一个vue项目（详细步骤）_创建vue项目-CSDN博客

4. 运行

# vue2运行命令
npm run dev

ctrl+鼠标左键点击链接访问，出现下方页面即为创建运行成功

ctrl+c停止运行

5. 引入Element-UI

Element-UI官网 Element - The world's most popular Vue UI framework

5.1 安装element-ui模块

npm i element-ui -S

5.2 引入element-ui

在main.js文件中，添加如下语句（全量引入）

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

5.3 测试

5.3.1 清空首页内容

在src目录下的App.vue中删除第3行图片

在src/components目录下的HelloWorld.vue中，删除原有内容，删除后如下

npm run dev启动后，首页变为空白页

5.3.2 添加element-ui按钮测试

在element-ui官网，点进组件菜单，左侧菜单中找到按钮分类，点击展开代码

展开后，复制圆角按钮代码，粘贴到HelloWorld.vue文件中

保存代码后，界面刷新如下，表示引入成功（在项目运行时，每次编辑代码后保存，可直接动态刷新页面，无需重启项目）