使用vue搭建应用——加入element及SCSS

安装使用 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 Code

Home.vue

View Code

404.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

出现

　　[email protected]" has incorrect peer dependency "webpack@^4.36.0".

换成命令

yarn add [email protected] 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>

View Code