• node.js + vue-cli + element ui安装教程


    node.js + vue-cli + element ui安装教程

    一、安装node.js

    1、安装包下载:http://nodejs.cn/download/

    image-20200901103902398

    2、安装node.js

    点击.exe文件,无脑next,选择安装目录即可:

    image-20200901104328092

    3、查看版本号及配置淘宝镜像

    以管理员身份 cmd 运行命令 node -vnpm -v:

    image-20200901104700982

    原npm下载依赖速度过慢,这里需要使用淘宝的镜像:

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    4、配置 npm 的 全局模块 global的路径和 缓存 cache的路径

    4.1在node.安装目录下新建 node_global node_cache 两个文件夹

    image-20200901105613726

    4.2、cmd执行以下两个命令:

    npm config set prefix "D: ools ode ode_global"

    npm config set cache "D: ools ode ode_cache"

    image-20200901105651130

    5、配置环境变量

    环境变量 >> 系统变量 新建 NODE_PATH, 变量值为 node_modules 路径

    image-20200901110226745

    环境变量 >> 用户变量 编辑 Path 变量下 的 node 变量值 为 global 路径

    image-20200901110450613

    验证环境变量是否配置成功:cmd执行命令 npm config ls, global以及 cache路径更新则配置成功:

    image-20200901110744295

    至此, node.js 安装完毕!

    二、vue-cli 2.0版本安装及创建项目

    1、cmd 执行安装命令:

    npm install vue-cli -g
    

    2、查看版本号:

    vue -V
    

    image-20200901113746193

    3.0 及以上版本的安装命令如下,3.0版本与 element ui 存在兼容性问题,故此回退

    #安装3.0	
    npm install @vue/cli -g
    
    #卸载2.0
    npm uninstall vue-cli -g
    
    #卸载3.0
    npm uninstall @vue/cli -g
    

    3、创建 基于webpack的项目

    3.1创建命令
    #hellovue2为项目名
    vue init webpack hellovue2
    
    3.2选择配置

    基本上选择默认配置即可完成创建:

    image-20200901115532216

    3.3 启动项目
    #进入项目根目录
    cd hellovue2
    

    然后

    #启动项目
    npm run dev
    

    image-20200901115854382

    复制路径,浏览器访问效果如下:

    image-20200901120121343

    至此,一个vue项目创建完毕!

    三、引入 Element ui

    1、cmd 项目目录下安装 Element ui:

    npm i element-ui -S
    

    image-20200901135632424

    2、main.js写入以下内容(全局引入):

    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    import router from './router'
    
    Vue.config.productionTip = false
    
    Vue.use(ElementUI);
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    3、引入组件

    官网:https://element.eleme.cn/#/zh-CN/component/badge,引入组件时,会出现下图错误,需在 <template>标签下,添加 <div>标签,将<el>标签包含进来。

    image-20200901140518955

    4、配置访问路由

    Badge.vue文件如下:

    <template>
     <div>
       <el-row class="demo-avatar demo-basic">
           <el-col :span="12">
             <div class="sub-title">circle</div>
             <div class="demo-basic--circle">
               <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
               <div class="block" v-for="size in sizeList" :key="size">
                 <el-avatar :size="size" :src="circleUrl"></el-avatar>
               </div>
             </div>
           </el-col>
           <el-col :span="12">
             <div class="sub-title">square</div>
             <div class="demo-basic--circle">
               <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
               <div class="block" v-for="size in sizeList" :key="size">
                 <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
               </div>
             </div>
           </el-col>
         </el-row>
     </div>
    </template>
    
    <script>
    export default {
      name: 'HelloBadge',
      data () {
        return {
          circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          sizeList: ["large", "medium", "small"]
        }
      }
    }
    </script>
    
    

    在router目录的index.js下进行如下配置:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import HelloBadge from '../components/Badge.vue'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/HelloBadge',
          name: 'HelloBadge',
          component: HelloBadge
        }
      ]
    })
    

    5、效果如下:

    image-20200901151020948

    关于绿色图片缘由:https://blog.csdn.net/weixin_43236610/article/details/82866518

    至此,Element ui组件引入完毕!

    自我控制是最强者的本能-萧伯纳
  • 相关阅读:
    网络安全课 06 【Euler、Fermat定理、Miller-Rabin 概率算法】
    网络安全课 05 【保密通信、秘钥分发】
    网络安全课 04 【双重、三重DES】
    状压DP【蓝桥杯 2019_C++_A T9】
    蓝桥杯 2019 C++ A 题解
    凯撒加密【加密+暴力破解+文本单词匹配】
    蓝桥杯 2018 C++ A 题解 【除7、10】
    rest_framework 分页三种
    rest_framework 序列化篇
    rest_framework 解析器(下 全局配置使用)
  • 原文地址:https://www.cnblogs.com/CF1314/p/13600131.html
Copyright © 2020-2023  润新知