elementUI入门和nodeJS环境搭建

最新推荐文章于 2022-10-20 18:47:28 发布

LIN_17970

最新推荐文章于 2022-10-20 18:47:28 发布

阅读量232

点赞数

分类专栏： element Ui node JS 文章标签： elementUI入门和nodeJS环境搭建

本文链接：https://blog.csdn.net/LIN_17970/article/details/98506176

版权

element Ui 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

node JS

1 篇文章 0 订阅

订阅专栏

文章目录

elementUI入门

简介

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

ElementUI官网：http://element-cn.eleme.io/#/zh-CN
CDN方式导入

 <!-- 1. 导入css -->
     <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
     <!-- 2. 引入vue和vue-router-->
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
     <!-- 未使用vue路由功能可不导入 -->
     <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
     <!-- 3. 引入ElementUI组件 -->
     <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

简单案例

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<!-- 1. 导入css -->
   	<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
   	<!-- 2. 引入vue和vue-router-->
   	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
   	<!-- 未使用vue路由功能可不导入 -->
   	<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
   	<!-- 3. 引入ElementUI组件 -->
   	<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

   	<title></title>
   </head>
   <body>
   <div id="app">
   	<el-row>
   		<el-button disabled>默认按钮</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>
   </body>
   <script type="text/javascript">
   	new Vue({
   		el:'#app'
   	})
   </script>
</html>

测试效果

nodeJS环境搭建

简介

Node.js是什么？

Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言
Node.js–>JavaScript运行环境，开发语言是：javascript
J2EE -->Java运行环境，开发语言是java
Node.js v10.15.3文档地址：http://nodejs.cn/api/

配置步骤

下载nodeJS的安装包
下载地址：https://nodejs.org/zh-cn/download/
解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
node_global：npm全局安装位置
node_cache：npm缓存路径
配置环境变量
NODE_HOME:配置的是nodeJS解压的根路径D:\app\node-v10.15.3-win-x64

path:%NODE_HOME%;%NODE_HOME%\node_global
```
  **验证是否配置成功**   
  打开命令窗口
 node -v
 npm -v
```
配置npm的全局模块的下载地址
npm config set cache “D:\app\node-v10.15.3-win-x64\node_cache”
npm config set prefix “D:\app\node-v10.15.3-win-x64\node_global”
设置淘宝源
npm config set registry https://registry.npm.taobao.org/
查看源，可以看到设置过的所有的源
npm config get registry
如何运行下载的Node.js项目
将下载的项目解压到指定目录，本例是解压到：D:\app\nmgwap-vueproject-master\vueproject，后面都以此为例
- 打开命令窗口 cmd
- 切换到d盘
- 进入指定目录
cd D:\app\nmgwap-vueproject-master\vueproject
进行依赖安装执行npm install
在通过npm run dev 启动项目