element ui框架（准备）

和vue代码配合最好的ui框架，基本上就是element ui了。做前端开发的同学，只要用到vue，就会使用到element ui。这和bootstrap有点相像，早期的时候用到jquery，基本就会用到bootstrap。但是，要用到element ui，我们还是需要做一些必要的准备。

1、安装node.js环境

node.js可以看成是开发平台。js和node.js的关系，有点类似于c++和visual studio。node.js不仅仅可以开发前端代码，还可以开发后端代码。比如现在用的比较多的express框架、koa框架等等的，都是在node.js上面开发的。

安装好了，输入node -v就会显示相关的打印，

C:\Users\feixiaoxing>node -v
v16.17.0

2、熟悉npm

在node.js上面可以用npm安装大量的第三方库，这是比较方便的。某种意义上说，node.js有很多的轮子，开发的同学不需要自己再造轮子，直接使用别人开发好的代码就可以了。一般来说，安装好了node.js，npm也同步安装好了。可以通过输入npm -v命令来进一步验证，

C:\Users\feixiaoxing>npm -v
8.15.0

3、安装vue-cli命令

使用vue-cli可以直接创建vue工程。工程中，不同的目录、不同的代码都已经准备好了，开发者只需要在对应的目录添加项目文件即可。安装的命令如下所示，

npm install vue-cli -g

4、安装webpack库

一般来说，安装vue-cli的时候会默认安装webpack库的。为了防止webpack没有被安装，我们可以手动安装一下。当然，在此之前，可以用vue list查看下，

C:\Users\feixiaoxing>vue listAvailable official templates:★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.★  pwa - PWA template for vue-cli based on the webpack template★  simple - The simplest possible Vue setup in a single HTML file★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

如果在打印中发现没有wenpack库，可以输入

npm install webpack -g

5、创建第一个vue项目

通常情况下，直接输入vue init webpack demo就可以创建一个demo项目，但是由于配置的原因，输入命令并不总是成功的。一种变通的方法就是，

a) 先下载一个vuejs-template代码，地址在这， https://github.com/vuejs-templates/webpack.git

b) 利用下载的代码生成项目模板，即vue init ./webpack demo

6、编译第一个demo工程

经过第5步的操作之后，一般就可以创建好demo代码了。下面要做的就是进入代码目录、下载第三方模块、编译运行、发布。

cd demo
npm install
npm run dev
npm run build

7、查看创建的网页

有了1-6的铺垫，基本上在输入node run dev之后，就可以查看到对应的前端网页代码了。通常情况下，输入的网址是http://127.0.0.1:8080，如果你的8080端口已经被占用，那么可能会被分配到其他的端口，比如8081、8082这些都有可能。所以，最终网页是什么端口，这个根据最终的情况灵活做出选择即可。

element ui框架（准备）相关推荐

element UI框架Fr Cover主题插画下载模板V2.0
简介: 这是一款VUE.JS模板,基于element UI开发的一款Fr Cover 2.0插画下载模板,需要您对VUE.JS+node有一定的了解. 模板使用方法: 将源码倒入Hbulder/VS ...
Element UI 及 Element Plus框架
一,何为Element UI 及 Element Plus? 它们是前端框架.它是包含很多有自己风格的组件库. Element目前有两个版本:element-ui 及 element-plus两个版本 ...
实践 | Element UI + Vue 管理系统首页
大致效果图其中上方文头部导航,左边为菜单选项,中间为index页面. 进行组件化新建目录如下,新建文件如下其中分为两个文件夹,一个为views文件夹,一个为components文件夹,一个存放相 ...
2018年流行的vue前端UI框架
2018年九个很受欢迎的vue前端UI框架作者: 祈澈菇凉原文: https://blog.csdn.net/qq_36538012/article/details/82152052 最近在逛各大 ...
ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
element ui table的show-overflow-tooltip属性以及设置其宽度
用vue+element ui框架,用到table表格,如果每列显示的内容过长则可以使用该属性,即 :show-overflow-tooltip="true",该属性可以让内容在一 ...
Element UI Element Plus之改变表格单元格颜色
首先官网文档中有 Table 表格组件的属性说明,只需要在el-table标签中加上:cell-style="xxx",以及实现该方法即可.Element UI框架和Elemen ...
最受欢迎的7个前端UI框架
一:Mint UI 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 由饿了么前端团队 ...
8个优秀的前端UI框架
一.Mint UI 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 由饿了么前端团队 ...

element ui框架（准备）

element ui框架（准备）相关推荐

最新文章

热门文章