Vue与Element-ui的详细安装步骤

发表于 | 分类于
字数统计: 494 | 阅读时长 ≈ 2
vue的详细安装步骤

Vue的安装

需要安装node.js

这个就是安装一个软件node.js，点击此处进入官网，根据自己的电脑的操作位数进行下载并安装。

怎么检查是否安装成功呢？

打开cmd命令窗口输入以下命令后显示安装的node.js版本即可。

node -v

由于npm集成在node中的，所以直接输入npm -v查看npm的版本信息即可。

npm -v

安装vue-cli脚手架构建工具

npm install -g vue-cli

可以使用以下命令查看其版本信息

vue –version

用vue-cli构建项目，选择一个文件夹，准备存储并创建项目

vue init webpack test(文件夹名)

运行项目工程

进入刚才创建的项目文件夹下

cd test

npm run dev

如果成功的话，打开浏览器输入127.0.0.1:8080即可看到vue的欢迎页面。

引入Element-ui至vue项目中

在当前目录下，运行以下命令，即可安装Element-ui的相关依赖

npm i element-ui -S

在src/main.js中添加如下代码

注意一下第二个红色的框的index.css，找自己项目中对应文件的位置。

检测是否引入成功

在src/components/Hello.vue文件中添加一个element-ui的按钮组件作为测试，再次运行，看是否出现相应的按钮组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>  
  <div class="hello">  
    <h1>{{ msg }}</h1>  
    <h2>Essential Links</h2>  
    <el-button>默认按钮</el-button>  
    <el-button type="primary">主要按钮</el-button>  
    <el-button type="text">文字按钮</el-button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'hello',  
  data () {  
    return {  
      msg: 'Welcome to Your Vue.js App'  
    }  
  }  
}  
</script>  
  
<!-- Add "scoped" attribute to limit CSS to this component only -->  
<style scoped>  
h1, h2 {  
  font-weight: normal;  
}  
  
ul {  
  list-style-type: none;  
  padding: 0;  
}  
  
li {  
  display: inline-block;  
  margin: 0 10px;  
}  
  
a {  
  color: #42b983;  
}  
</style>