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-ui\src\components\新建个vue组件，组件名为radio

radio组件代码 

</code> </div> <div class="line number10 index9 alt1"> <code class="csharp spaces">  </code> <code class="csharp plain">export </code> <code class="csharp keyword">default</code>  <code class="csharp plain">{</code> </div> <div class="line number11 index10 alt2"> <code class="csharp spaces">    </code> <code class="csharp plain">data () {</code> </div> <div class="line number12 index11 alt1"> <code class="csharp spaces">      </code> <code class="csharp keyword">return</code>  <code class="csharp plain">{</code> </div> <div class="line number13 index12 alt2"> <code class="csharp spaces">        </code> <code class="csharp plain">radio2: 3</code> </div> <div class="line number14 index13 alt1"> <code class="csharp spaces">      </code> <code class="csharp plain">};</code> </div> <div class="line number15 index14 alt2"> <code class="csharp spaces">    </code> <code class="csharp plain">}</code> </div> <div class="line number16 index15 alt1"> <code class="csharp spaces">  </code> <code class="csharp plain">}</code> </div> <div class="line number17 index16 alt2"> <code class="csharp plain">

2、在element-ui\src\router.js中设置路由

 

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

3、在\element-ui\src\main.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脚手架时很容易出错，搞得很多人包括我自己都摸不着头脑。这里有个教训就是，报错要学会耐心的看调试模式下提示的错误，不懂就去百度，对于英语较为好的这里有比较大的好处，怎么提示错误就怎么解决错误，就是这么简单。

愿你走出半生，归来仍是少年