ElementUI+NodeJS环境搭建

时间 2019-11-16

标签 elementui+nodejs elementui nodejs 环境搭建繁體版

原文原文链接

Element简介：javascript

咱们学习VUE,知道它的核心思想式组件和数据驱动,可是每个组件都须要本身编写模板,样式,添加事件,数据等是很是麻烦的,因此饿了吗推出了基于 VUE2.0的组件库,提供现成的PC端组件. css

这个组件库的名称叫作element-ui,基于Vue2.0开发,提供了丰富的PC端组件html

框架的使用方法,大同小异,通常是导入相关文件,须要使用什么组件就查阅该组件的说明文档vue

Element官网：https://element.eleme.cn/#/zh-CNjava

Element实例：node

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
        <div id="app">
            <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>
        
        <script>
            new Vue({
                el:"#app"
            });
        </script>
    </body>
</html>

Node.js是什么？webpack

Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。git

Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言分庭抗礼的脚本语言github

简单的说node.js就是把浏览器的解释器封装起来做为服务器运行平台，用相似javascript的结构语法进行编程，在node.js上运行。web

npm是什么？

NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，常见的使用场景有如下几种：

容许用户从NPM服务器下载别人编写的第三方包到本地使用。
容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。

Node.js环境搭建

一、下载

下载地址：https://nodejs.org/zh-cn/download/

选择相应的版本下载，这里使用的是：node-v10.15.3-win-x64.zip

二、解压

将文件解压到指定位置，并在解压后的目录下创建node_global和node_cache这两个目录

三、配置环境变量

新增NODE_HOME，值为：D:\initPath\node-v10.15.3-win-x64

修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

测试安装是否成功：打开cmd窗口，输出以下命令

node -v

npm -v

若是出现版本号就表明成功了

四、配置npm全局模块路径和cache默认安装位置

打开cmd，分开执行以下命令：

npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"

npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"

五、修改npm镜像提升下载速度(能够使用 cnpm 或直接设置 --registry ，推荐设置 --registry)

设置淘宝源

npm config set registry https://registry.npm.taobao.org/

六、查看淘宝镜像设置状况

npm get registry

七、查看npm全局路径设置状况

npm install webpack -g

以上命令执行完毕后，会生成以下文件

%node_home%\node_global\node_modules\webpack

注意：下载过程当中出现warn不用管，出现Error，删掉下载的破碎文件从新下载

如何运行下载的Node.js项目

将下载github的Vue的项目解压，在解压的项目中是没有node_modules的，在工程的根目录下须要经过npm install进行再次依赖下载

在cmd执行完 npm install下载完成后，启动项目执行：

npm run dev

项目运行截图：