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