使用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)
});