zoukankan      html  css  js  c++  java
  • ElementUI+NodeJS环境搭建

    Element简介:

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

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

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

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

    Element实例:

    <!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是什么?

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

       Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHPPythonPerlRuby等服务端语言平起平坐的脚本语言

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

    npm是什么?

         NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

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

    Node.js环境搭建

      1、下载

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

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

           2、解压

         将文件解压到指定位置,并在解压后的目录下建立node_globalnode_cache这两个目录

      3、配置环境变量

          新增NODE_HOME,值为:D:initPath ode-v10.15.3-win-x64

                 修改PATH并在最后添加:;%NODE_HOME%;%NODE_HOME% ode_global;

          测试安装是否成功:打开cmd窗口,输出如下命令

                     node -v

                  npm -v

          如果出现版本号就代表成功了

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

                  打开cmd,分开执行如下命令:

                npm config set cache "D:initPath ode-v10.15.3-win-x64 ode_cache"

                npm config set prefix "D:initPath ode-v10.15.3-win-x64 ode_global"

      5、修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ,推荐设置 --registry)

        设置淘宝源

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

          6、查看淘宝镜像设置情况

         npm get registry

      7、查看npm全局路径设置情况

                     npm install webpack -g

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

              %node_home% ode_global ode_moduleswebpack

      注意:下载过程中出现warn不用管,出现Error,删掉下载的破碎文件重新下载

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

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

       在cmd执行完 npm install下载完成后,启动项目执行:

          npm run dev

    项目运行截图:

  • 相关阅读:
    poj- 2528 Mayor's posters
    POJ 2631 Roads in the North (树的直径裸题)
    Quoit Design (白话--分治--平面点对问题)
    洛古 P1020 导弹拦截 (贪心+二分)
    D
    代理模式---动态代理之Cglib
    代理模式---动态代理之JDK
    开闭原则
    迪米特法则
    接口隔离原则
  • 原文地址:https://www.cnblogs.com/psyu/p/11302204.html
Copyright © 2011-2022 走看看