vue2 0 element搭建後台系統（3）

element-ui官網:

執行以下命令：

npm i element-ui -s

現在接著改造專案,首先在入口檔案引入element。在main.js頭部import。

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import vue from
'vue'
import router from
'./router'
import elementui from
'element-ui'
import
'element-ui/lib/theme-chalk/index.css'
vue.
use(elementui)
vue.config.productiontip =
false
router.
beforeeach
((to,
from
, next)
=>
let user =
json
.parse
(sessionstorage.
getitem
('user'))
if(!user && to.path !==
'/login'))
}else})
/* eslint-disable no-new */
newvue
()

建立檔案：

src/components/home.vue

default

-active=
"activeindex"
class
="el-menu-demo" mode=
"horizontal"
background-color=
"#545c64" text-color=
"#fff" active-text-color=
"#ffd04b"
>
"1">處理中心<
/el-menu-item>
"3">訊息中心<
/el-menu-item>
"4">訂單管理<
/el-menu-item>
<
/el-menu>
<
/el-header>
"200px"
>
default
-active=
"2"class
="el-menu-vertical-demo"
@open=
"handleopen"
@close=
"handleclose"
>
"1">
"title"
>
="el-icon-location"
>
<
/i>
導航一<
/span>
<
/template>
"1-1"
>選項1
<
/el-menu-item>
"1-2"
>選項2
<
/el-menu-item>
"1-3"
>選項3
<
/el-menu-item>
<
/el-submenu>
"2">
="el-icon-menu"
>
<
/i>
"title"
>導航二<
/span>
<
/el-menu-item>
"3" disabled>
="el-icon-document"
>
<
/i>
"title"
>導航三<
/span>
<
/el-menu-item>
"4">
="el-icon-setting"
>
<
/i>
"title"
>導航四<
/span>
<
/el-menu-item>
<
/el-menu>
<
/el-col>
<
/el-aside>
main<
/el-main>
footer<
/el-footer>
<
/el-container>
<
/el-container>
<
/el-container>
<
/div>
<
/template>
export
default},
methods:
,handleclose
(key, keypath)}}
<
/script>
.el-header 
.el-header,
.el-footer 
.el-aside 
.el-main 
/*body > .el-container */
/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside */
/*.el-container:nth-child(7) .el-aside */
<
/style>更改路由：
src/router/index.js
import vue from

import router from

'vue-router'

import home from

'@/components/home'

import login from

'@/components/login'

vue.

use(router)

export

default

newrouter(,]})

vue及element專案環境搭建

vue cli failed to download repo vuejs templates webpack unable to verify the first certificate 2.把解壓出的資料夾放在 c users 當前使用者名稱.vue templates 沒有就新建乙個 vue ...

vue2 0建立專案到引入element

一 安裝node環境 提高效率，可以用 的映象 輸入 npm install g cnpm registry 即可安裝npm映象，以後再用到npm的地方直接用cnpm來代替就好了。二 搭建vue專案環境 1 全域性安裝vue cli npm install global vue cli 2 進入你的...

vue2 0 windows環境搭建

首先安裝的git，他的右鍵git bash here定位比cmd的命令列要準確，接下來的命令都是利用git的git bash here，反正我用cmd的時候是失敗的。1 首先，vue.js是一種前端框架，一般利用vue建立專案是要搭配webpack專案構建工具的，而webpack在執行打包壓縮的時候...