【vue】创建第一个vue+element ui项目（全网最详细）

前言

在之前的篇章中咱们一起搭建了vue开发环境，接下来开始创建第一个vue+element项目吧（vue：前端JavaScript框架 element：前端UI框架）

vue开发环境搭建请参考【vue】在windows中搭建vue开发环境（全网最详细）

创建vue项目

一、开发工具vs code

1、创建一个存放项目的文件目录，如：C:\Project\VUE

2、在文件目录空白处，右键点击“通过code打开”（推荐使用vs code 开发）

3、通过以下截图打开终端（或快捷键 ctrl+shift+'），如下图

 二、开始创建项目

1、在终端输入命令 vue init webpack 项目名称

vue init webpack MyPortalProject

 按回车键后，根据下图进行选择（可以根据自身需求进行选择）

选择NPM进行创建

项目创建完成后，如下图

三、运行项目

按照提示，在终端运行cd MyPortalProject ，将路径指定到项目中

cd MyPortalProject

然后运行命令 npm run dev，启动项目看看最终效果吧

 npm run dev

执行命令后按照提示在浏览器中访问http://localhost:8080，效果如下

至此，第一个vue项目就创建完成了，项目创建完了，接下来就需要考虑使用什么UI框架（element-UI， antd等），由于近期项目上使用element，所以接下来咱们一起来安装element-ui框架

antd UI可以 参考如下文章：

【vue】vue项目中使用antd UI框架，从创建新项目开始一步一步来探索吧

四、安装element-ui框架

说明：如果项目正在运行中，可以直接Ctrl+C，然后输入Y停止运行，然后再安装element

好了，言归正传，开始安装element-ui（每次都说这么多废话，是不是太啰嗦了，大伙儿忍忍哈，哈哈）

在终端输入命令

cnpm i element-ui -S

安装完成后效果如下 

 五、在项目中使用element-ui

1、在main.js中引入element组件

/*引入如下组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

main.js修改后的代码为

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、修改组件HelloWorld.vue代码如下（可以参考element ui官网）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "使用element-ui测试",
    };
  },
};
</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>

然后运行命令npm run dev看一下效果吧

 废话又来了，哈哈哈

至此vue开发环境、vue项目的创建、vue前端ui框架的安装和使用就和大家一起了解了

如上如有错漏，请大家及时指出，小生这厢有礼了