使用ElementUI创建项目使用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
这时候项目就创建好了，创建好

 

的项目目录如下:

转存失败重新上传取消

 第三步，增加 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)
});