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的按钮组件作为测试,再次运行,看是否出现相应的按钮组件。
<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>