Skip to content

Commit 1bfc748

Browse files
bai3bai3
committed
🚧 学习引入less和element-ui
1 parent cf32b78 commit 1bfc748

File tree

10 files changed

+42
-45
lines changed

10 files changed

+42
-45
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# message-board
1+
# message
22

33
> A Vue.js project
44

‎config/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ module.exports = {
5555
// Paths
5656
assetsRoot: path.resolve(__dirname, '../dist'),
5757
assetsSubDirectory: 'static',
58-
assetsPublicPath: '/',
58+
assetsPublicPath: './',
5959

6060
/**
6161
* Source Maps

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6-
<title>message-board</title>
6+
<title>message</title>
77
</head>
88
<body>
99
<div id="app"></div>

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "message-board",
2+
"name": "message",
33
"version": "1.0.0",
44
"description": "A Vue.js project",
55
"author": "bai3 <[email protected]>",
@@ -14,8 +14,8 @@
1414
"build": "node build/build.js"
1515
},
1616
"dependencies": {
17-
"vue": "^2.5.2",
18-
"vue-router": "^3.0.1"
17+
"element-ui": "^2.0.7",
18+
"vue": "^2.5.2"
1919
},
2020
"devDependencies": {
2121
"autoprefixer": "^7.1.2",
@@ -50,6 +50,8 @@
5050
"html-webpack-plugin": "^2.30.1",
5151
"jest": "^21.2.0",
5252
"jest-serializer-vue": "^0.3.0",
53+
"less": "^2.7.3",
54+
"less-loader": "^4.0.5",
5355
"nightwatch": "^0.9.12",
5456
"node-notifier": "^5.1.2",
5557
"optimize-css-assets-webpack-plugin": "^3.2.0",

‎src/App.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
4-
<router-view/>
3+
<Message/>
54
</div>
65
</template>
76

87
<script>
8+
import Message from './components/Message'
99
export default {
10-
name: 'app'
10+
name: 'app',
11+
components: {
12+
Message
13+
}
1114
}
1215
</script>
1316

‎src/components/HelloWorld.vue

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,10 @@
11
<template>
22
<div class="hello">
33
<h1>{{ msg }}</h1>
4-
<h2>Essential Links</h2>
5-
<ul>
6-
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
7-
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
8-
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
9-
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10-
<br>
11-
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12-
</ul>
13-
<h2>Ecosystem</h2>
14-
<ul>
15-
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16-
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17-
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18-
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19-
</ul>
4+
<el-button @click="visible = true">按钮</el-button>
5+
<el-dialog :visible.sync="visible" title="Hello world">
6+
<p>欢迎使用 Element</p>
7+
</el-dialog>
208
</div>
219
</template>
2210

@@ -25,16 +13,20 @@ export default {
2513
name: 'HelloWorld',
2614
data () {
2715
return {
28-
msg: 'Welcome to Your Vue.js App'
16+
msg: 'Welcome to Your Vue.js App',
17+
visible: false
2918
}
3019
}
3120
}
3221
</script>
3322

3423
<!-- Add "scoped" attribute to limit CSS to this component only -->
35-
<style scoped>
24+
<style lang="less">
25+
@bg: red;
26+
3627
h1, h2 {
3728
font-weight: normal;
29+
color: @bg;
3830
}
3931
ul {
4032
list-style-type: none;

‎src/components/Message.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="message">
3+
<h1>留言板</h1>
4+
</div>
5+
</template>
6+
<style lang="less">
7+
@bg: blue;
8+
h1{
9+
color: @bg
10+
}
11+
12+
</style>
13+

‎src/main.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
33
import Vue from 'vue'
44
import App from './App'
5-
import router from './router'
5+
import ElementUI from 'element-ui'
6+
import 'element-ui/lib/theme-chalk/index.css'
7+
import 'element-ui/lib/index.js'
68

79
Vue.config.productionTip = false
810

11+
Vue.use(ElementUI)
12+
913
/* eslint-disable no-new */
1014
new Vue({
1115
el: '#app',
12-
router,
1316
template: '<App/>',
1417
components: { App }
1518
})

‎src/router/index.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎test/unit/jest.conf.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ module.exports = {
2424
collectCoverageFrom: [
2525
'src/**/*.{js,vue}',
2626
'!src/main.js',
27-
'!src/router/index.js',
2827
'!**/node_modules/**'
2928
]
3029
}

0 commit comments

Comments
 (0)