• 使用ElementUI创建项目


     从 0 开始搭建 element 项目

     第一步,安装 Nodejs/NPM

    https://nodejs.org/zh-cn/download/

    下载安装即可!

    第二步,安装 vue-cli

    打开 cmd 创建,在命令行下执行命令即可安装:
    npm install -g @vue/cli
    安装完后,会有一个 vue 命令可以被调用: vue
    --version
    如果没有,请从第零步重新开始

    第二步,创建新的项目 打开 cmd 窗口,切换到相关工作目录: d: cd wodegongzuomulu 然后,在命令行下,使用 vue 命令创建项目: vue create vue-xiangmu 这时候项目就创建好了,创建好

    的项目目录如下:

    clip_2018-11-22_06-58-34.png

     第三步,增加 ElementUI 的支持

    在刚才的命令行下,敲入命令:
    
    vue add element
    如果有提醒,分别选择:
    
    Full Import? Enter
    SCSS support? N
    ZH-CN
    等待完成即可。

     第四步,增加 router 支持

    在上述的命令行下,敲入命令:
    
    vue add router
    如果有提醒,选择“回车”,“回车”….
    
    等待完成即可!

     第五步,开始编码。

     另外的另外

    vue add router 命令等同于:
    
    首先执行 npm install vue-router --save
    
    在 main.js 里添加:
    
    // 引进
    import Router from 'vue-router'
    import Home from './components/Home'
    import About from './components/About'
    
    // 注册
    Vue.use(Router)
    
    // 定义
    const router = new Router({
        base: process.env.BASE_URL,
        routes: [
            { path: '/', component: Home },
            { path: '/about, component: About }
        ]
    })

    vue add element 命令等同于:

    首先,执行 npm install element-ui --save
    在 main.js 里配置:
    
    import Vue from 'vue';
    import App from './App.vue';
    
    // 引入 js + css
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    // 注册
    Vue.use(ElementUI);
    
    new Vue({
        el: '#app',
        render: h => h(App)
    });
  • 相关阅读:
    Perl Language 从入门到放弃 All In One
    Linux shell command line editor All In One
    TypeScript infer keyword All In One
    垂钓图解教程: 鱼钩 All In One
    CSS `@fontface` & fontfamily All In One
    Linux bash sed command All In One
    YouTube 标识名 All In One
    Leetcode 面试题 16.15. 珠玑妙算
    Leetcode 1385. 两个数组间的距离值
    Leetcode 984. 不含 AAA 或 BBB 的字符串(网友思路)
  • 原文地址:https://www.cnblogs.com/nongzihong/p/10002286.html
Copyright © 2020-2023  润新知