【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框架的安装和使用就和大家一起了解了

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

好的,这是一个比较大的任务,我会尽力回答你的问题。首先,你需要安装以下软件: 1. Node.js:用于运行Vue CLI和npm。 2. Visual Studio Code:一个常用的代码编辑器。 3. Vue CLI:用于创建Vue项目的脚手架工具。 接下来,你可以按照以下步骤创建一个Vue项目: 1. 打开终端或命令行工具,在任意目录下创建一个新的项目文件夹,例如"my-project"。 2. 进入该文件夹,在终端中运行以下命令: ``` npm install -g vue-cli vue init webpack my-project ``` 这将使用Vue CLI创建一个新的Vue项目。 3. 接下来,你需要安装Element UI组件库。在终端中运行以下命令: ``` npm install element-ui --save ``` 4. 修改Vue项目中的main.js文件,以便在项目中使用Element UI组件。将以下代码添加到文件的顶部: ``` import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 5. 现在你可以在Vue项目中使用Element UI组件了。例如,在App.vue文件中添加以下代码: ``` <template> <div> <el-button>这是一个Element UI按钮</el-button> </div> </template> ``` 6. 最后,在终端中运行以下命令启动Vue项目: ``` npm run dev ``` 这将启动一个本地开发服务器,并在浏览器中打开你的Vue项目。现在你可以在你的项目中使用Element UI组件了。 希望这些步骤可以帮助你开始使用Vue2 + Element UI构建项目。如果你有其他问题,请随时问我。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一起来学吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值