初始化项目

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "element-ui": "^2.13.2",
     "vue": "^2.6.10",
     "vue-module-loader": "^1.0.3",
     "vue-router": "^3.1.3",
@@ -26,10 +27,11 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
     "prettier": "^1.18.2",
+    "sass-resources-loader": "^2.0.3",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.6.10"
   },
   "description": "test",
   "author": "ln"
-}
+}

src/App.vue

@@ -1,28 +1,14 @@
 <template>
   <div id="app">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </div>
+      <router-link to="/login">login</router-link>
+    </div> -->
     <router-view />
   </div>
 </template>
 
-<style lang="stylus">
-#app
-  font-family 'Avenir', Helvetica, Arial, sans-serif
-  -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
-  text-align center
-  color #2c3e50
+<style lang="scss">
 
-#nav
-  padding 30px
-
-  a
-    font-weight bold
-    color #2c3e50
-
-    &.router-link-exact-active
-      color #42b983
 </style>

src/assets/css/reset.scss

@@ -0,0 +1 @@
+/* 公用scss */

src/main.js

@@ -1,14 +1,19 @@
 import Vue from 'vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
-Vue.use(vueModuleLoader, { store })
+
+Vue.use(vueModuleLoader, { store }).use(ElementUI);
+
 const app = new Vue({
   router,
   store,
   render: h => h(App)
 })
+
 app.$moduleLoader(localModule)
 app.$mount('#app')

src/router/index.js

@@ -1,11 +1,16 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
+    path: '/login',
+    name: 'login',
+    component: Login
+  }, {
     path: '/',
     name: 'home',
     component: Home

src/router/routes.js

@@ -2,7 +2,6 @@ export default [
   {
     path: '/about',
     name: 'about',
-    component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
 ]

src/views/Login.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="login">
+    <h1 class="h1">登录界面</h1>
+  </div>
+</template>
+<script>
+export default {
+  name: 'login',
+  mounted() {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h1{
+    color: #f00;
+}
+</style>

vue.config.js

@@ -4,5 +4,13 @@ module.exports = {
     resolve: {
       symlinks: false
     }
+  },
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'scss',
+      patterns: [
+        './src/assets/css/reset.scss'
+      ]
+    }
   }
 }