搭建前端项目 Vue+element UI引入 步骤 （超详细）

一、准备工作

1. 首先需要下载nodejs，安装后打开命令窗口可以使用npm包管理工具

2. npm集成在node中的，所以直接输入npm-v查看npm的版本信息

3.安装Vue CLI （使用npm全局安装Vue CLI工具，确保已安装 Node.js环境。）

npm install -g @vue/cli

或  

cnpm install -g @vue/cli

安装成功后，命令行输入 vue -V 可以查看版本号

二、创建Vue项目

2.1通过Vue CLI创建新项目，选择默认配置或手动配置。

（这里我选手动配置）

immoc-datav-report-dev为项目名

vue create immoc-datav-report-dev 

这样项目就已经初始化完毕了

tips

如果在安装过程中，出现报错，可能是因为npm在国内安装比较慢，推荐使用 淘宝镜像 （cnpm ）进行安装 ，输入该命令，回车，这样安装就会很快

vue create  immoc-datav-report-dev --registry=https://registry.npm.taobao.org

接下来可以使用 npm run serve 运行项目，浏览器查看效果

此外

我们可以在APP.Vue 文件中，做一下全局样式配置（根据自己的需求配置哈，不需要的话可以不配置）

<style lang="scss">
html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>

三、安装Element UI

两种方式安装

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

1 . 通过npm或yarn安装Element UI库。

npm install element-ui --save

1.1 全局引入Element UI

在项目的 main.js 文件中导入Element UI并注册。

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

Vue.use(ElementUI)

1.1.1 按需引入Element UI组件（可选）

若需优化体积，可安装babel插件并按需引入组件。

npm install babel-plugin-component -D

修改babel.config.js文件：

module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

1.1.2 在组件中单独引入所需组件：

import { Button, Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)

1.1.3 运行项目

启动开发服务器查看效果。

npm run serve

1.1.4 测试Element UI组件

在任意组件模板中使用Element UI组件验证是否成功引入。

<el-button type="primary">测试按钮</el-button>

2.通过下载插件安装Element UI 库

输入命令

vue add element

出现这个 Still proceed 输入y 就可以了，这是因为我们项目初始化之后，有文件修改，没有进行commit提交，出现的提示哈。

然后会安装一个 vue-cli-plug-element 插件，这个插件会帮我们完成一个Element UI 的安装和引入

成功安装后 会出现一个提示，是全量引入 还是 按需引入

全量引入，体积较大，所以我们选择 按需引入 Improt on demand，选择需要加载的文字 ：zh-cn

安装成功之后，APP.Vue 页面发生了一些变化，多了一些代码，这个是插件它帮我们写了一些ELment 样例测试

总结

到这里我们就已经初步搭建完一个简单的 vue+Element UI的项目了，可以按照需求进行页面开发咯