Vue与Element的安装

约定不等于承诺〃 2022-04-04 04:31 194阅读 0赞

### Vue的安装 ###

### 需要安装node.js ###

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

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

打开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中添加如下代码 ###

![8926032.jpg][]

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

### 检测是否引入成功 ###

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

<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>  
      
      
    <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>

[Link 1]: https://nodejs.org/en/
[8926032.jpg]: /images/20220404/e1218109a495431d96aac5ade52f5b8e.png