zoukankan      html  css  js  c++  java
  • Element UI 框架搭建

    Element UI 框架搭建

    1、webpack 全局安装

    npm install -g webpack
    

    2、淘宝镜像cnpm安装

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

    3、vue脚手架全局安装 -- 用于生成vue模板

    npm install -g vue-cli
    

    4、使用脚手架构建vue项目 -- 一路回车就行了

    vue init webpack
    

    目前可用的模板介绍

    browserify–全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
    browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
    webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
    webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
    

    5、element-ui安装

    npm i element-ui
    

    6、依赖安装,这里用cnpm安装,因为依赖太多不然,不然让你等的蛋疼 -- 会在项目中生成一个node_modules文件

    cnpm install
    

    大功告成,这里可以运行了

    npm run dev

    vue项目的构建到现在就算完成了,那么现在就引入element-ui组件模块

    这里以radio组件为例

    1、在element-uisrccomponents新建个vue组件,组件名为radio

    radio组件代码 

    <template>
      <el-radio-group v-model="radio2">
        <el-radio :label="3">备选项</el-radio>
        <el-radio :label="6">备选项</el-radio>
        <el-radio :label="9">备选项</el-radio>
      </el-radio-group>
    </template>
    
    <script>
      export default {
        data () {
          return {
            radio2: 3
          };
        }
      }
    </script>
    

    2、在element-uisrc outer.js中设置路由

    import radio from '@/components/radio' //引入刚创建的组件
    //设置路由
    {
          path: '/radio',
          name: 'radio',
          component: radio
    }
    

    3、在element-uisrcmain.js中加入element-ui的js和css

    import ElementUI from 'element-ui' //element-ui的全部组件
    import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
    Vue.use(ElementUI) //使用elementUI
    

    大功告成,运行后的效果就是这个样子

     总结:在使用初学vue脚手架时很容易出错,搞得很多人包括我自己都摸不着头脑。这里有个教训就是,报错要学会耐心的看调试模式下提示的错误,不懂就去百度,对于英语较为好的这里有比较大的好处,怎么提示错误就怎么解决错误,就是这么简单。

  • 相关阅读:
    Flush输出表格内容
    [From Linux Toy] inxi– bash script to get system information
    .NET中Mocking框架的对比
    Python中的对象和动态性 [菜鸟的理解,高手莫入]
    《正见 佛陀的证悟》读书摘记 (1)
    Quote for tomorrow
    不抱怨就会死
    web deploy + windows server 2008 r2 64bit + iis 7.5
    bootsnipp
    [转载] A Beginner's Guide to HTTP Cache Headers
  • 原文地址:https://www.cnblogs.com/yz-blog/p/7978887.html
Copyright © 2011-2022 走看看