使用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

Home.vue

404.vue

修改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 "[email protected]^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>

原文地址：https://www.cnblogs.com/baby123/p/11857164.html