【vue】创建第一个vue+element ui项目（全网最详细） |
您所在的位置：网站首页 › vue安装elementui一直加载 › 【vue】创建第一个vue+element ui项目（全网最详细） |
【vue】创建第一个vue+element ui项目（全网最详细）
|
前言
在之前的篇章中咱们一起搭建了vue开发环境，接下来开始创建第一个vue+element项目吧（vue：前端JavaScript框架 element：前端UI框架） vue开发环境搭建请参考【vue】在windows中搭建vue开发环境（全网最详细） 创建vue项目 一、开发工具vs code1、创建一个存放项目的文件目录，如：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安装完成后效果如下
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: '' })2、修改组件HelloWorld.vue代码如下（可以参考element ui官网）
然后运行命令npm run dev看一下效果吧
废话又来了，哈哈哈 至此vue开发环境、vue项目的创建、vue前端ui框架的安装和使用就和大家一起了解了 如上如有错漏，请大家及时指出，小生这厢有礼了 |
【本文地址】