标签：sla exp correct tar 技术 one login 显示 outer
安装使用 element
1.安装
yarn add element-ui
2.使用
（1）在 main.js 中引入 element
main.js 为修改
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
router,
render: h => h(App)
})
（2）简单应用
修改 src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
msg: ‘Welcome to Your Vue.js App‘
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
重新启动，预览 http://localhost:8080，变为
（3）修改路由
将src下的components改为views，在views下添加页面Login.vue、Home.vue、404.vue
Login.vue
View CodeHome.vue
View Code404.vue
View Code修改src/router/index.js，添加对应的路由
import Vue from ‘vue‘
import Router from ‘vue-router‘
import Login from ‘@/views/Login‘
import Home from ‘@/views/Home‘
import NotFound from ‘@/views/404‘
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/‘,
name: ‘Home‘,
component: Home
}, {
path: ‘/login‘,
name: ‘Login‘,
component: Login
}
, {
path: ‘/404‘,
name: ‘NotFound‘,
component: NotFound
}
]
})
重新启动服务
http://localhost:8080/#/
http://localhost:8080/#/login显示Login页面
（4）安装SCSS
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能
编写页面样式会用到SCSS，安装
yarn add sass-loader node-sass
出现
sass-loader@8.0.0" has incorrect peer dependency "webpack@^4.36.0".
换成命令
yarn add sass-loader@7.3.1 node-sass
在build/vue-loader.conf.js的rules下添加
{
test: /\.scss$/,
loaders: [‘style‘, ‘css‘, ‘sass‘]
}
使用
在页面中style标签修改为
<style lang="scss">
……
</style>
eg:
修改404.vue
<template>
<div class="site-wrapper site-page--not-found">
<div class="site-content__wrapper">
<div class="site-content">
<h2 class="not-found-title">404</h2>
<p class="not-found-desc">抱歉！您访问的页面不存在</p>
<el-button @click="$router.go(-1)">返回上一页</el-button>
<el-button type="primary" @click="$router.push(‘/‘)">进入首页</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "404"
};
</script>
<style lang="scss">
.site-page--not-found {
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
.site-content__wrapper {
padding: 0;
margin: 0;
background-color: #fff;
}
.site-content {
position: fixed;
top: 15%;
left: 50%;
z-index: 2;
padding: 30px;
text-align: center;
transform: translate(-50%, 0);
}
.not-found-title {
margin: 20px 0 15px;
font-size: 6em;
font-weight: 300;
color: rgb(55, 71, 79);
}
.not-found-desc {
margin: 0 0 30px;
font-size: 26px;
text-transform: uppercase;
color: rgb(118, 131, 143);
}
}
</style>
标签：sla exp correct tar 技术 one login 显示 outer
原文地址：https://www.cnblogs.com/baby123/p/11857164.html
