版權聲明：本文為博主原創文章，歡迎轉載，轉載請注明作者、原文超鏈接
前言:本文簡潔的描述VUE + ElementUI 從搭建到運行，可以根據本文先搭建出可運行的項目，然后再詳細回顧每個步驟所做的事；也可在第二次搭建的時候作為步驟回顧與參考。
一.在node.js官網下載node.js並安裝
//官網下載地址 https://nodejs.org/en/download/
二.安裝鏡像
//如果公司有搭建私服，使用公司私服鏡像 npm set registry http://127.0.0.1:4873
//可以使用淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org
三.安裝webpack
npm install webpack -g
四.安裝vue腳手架
npm install vue-cli -g
五.安裝 vue 路由模塊vue-router
npm install vue-router --save
六.創建一個簡單的vue項目
1.vue init webpack-simple demo1 //創建一個簡單的項目 2.npm install //引入項目依賴 3.npm run dev //運行
七.語法學習
vue語法與js很相似，會js的一看就懂了，這里就不做多介紹，可查看vue官網:https://cn.vuejs.org/v2/guide/syntax.html
八.組件創建和使用
1.父調用子組件的方法
//父組件調子組件的方法 //App.vue(父) <page1 ref="page1" @join="res"></page1> <button @click="send">調用組件內的方法:w1</button> send: function () { this.$refs.page1.come('w1') }
//page1.vue (子) come:function(data){ alert('page1:' + data) }
2.父組件接收子組件的返回值
//子組件返回值處理 //App.vue (父) <page1 ref="page1" @join="res"></page1> res: function (data) { alert("收到了Welcome組件的返回值:" + data) }
//page1.vue(子) join: function (data) { this.$emit('join','welcome') }
九.VueRouter路由配置
1.引入VueRouter組件
在之前我們已經安裝了vue-router,這里只需要引入即可
import VueRouter from 'vue-router' Vue.use(VueRouter);
2.創建路由組件
先創建兩個vue組件作為路由頁面
//page2.vue; page3.vue類似 <template> <div> <el-card>我的第二個頁面</el-card> </div> </template> <script> export default { components: {}, name: 'page2', data: function () { return {} }, methods: {} } </script> <style> </style>
3.定義路由
//先引入主鍵，才可以配置路由 import Page2 from '../src/pages/page2.vue' import Page3 from '../src/pages/page3.vue' const routes = [ { path: '/', component: App, children: [ {path: '/page2', component: Page2}, {path: '/page3', component: Page3}] }];
4.創建router實例
const router = new VueRouter({ routes: routes });
5.創建和掛載跟實例
const app = new Vue({ el: '#app', router: router }).$mount('#app');
6.實例路由配置完成后需要在index.html添加路由入口
<div id="app"> <router-view></router-view> </div>
7.路由跳轉
<router-link to="/page2">第二個頁面</router-link> <router-link to="/page3">第三個頁面</router-link>
十.element-iu 的安裝和使用
1.使用npm安裝element-ui
npm i element-ui -S
2.在main.js中導入使用vue
import 'element-ui/lib/theme-chalk/index.css' //導入樣式 import ElementUI from 'element-ui' Vue.use(ElementUI)
3.因為在elment-ui中css中運用了餓了么的字體庫，導致缺少解析器，運行會報錯,需要修改webpack.config.js文件,添加'ttf|woff'格式
{ test: /\.(png|jpg|gif|svg|ttf|woff)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }
4.elementUI 2.0版本以上使用了jsx的語法，這就是會用到一個 Babel plugin 插件，用於在 Vue 中使用 JSX 語法的原因，它可以讓我們回到於更接近模板的語法上。
1)安裝
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
2).編輯.babelrc文件
{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"] }
5.使用elementUI
使用起來很簡單，直接使用組件即可
<el-input v-model="input" placeholder="請輸入內容"></el-input>
更多組件使用請參考官網: http://element-cn.eleme.io/#/zh-CN/component/installation
十一.安裝Yarn
Yarn是Facebook最近發布的一款依賴包安裝工具。Yarn是一個新的快速安全可信賴的可以替代NPM的依賴管理工具。
//可以安裝yarn
npm install -g yarn
感謝您的閱讀，如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕。本文歡迎各位轉載，但是轉載文章之后必須在文章頁面中給出作者和原文連接。