Kobusb
/
BasicVueTemplate
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Start

master
Kobus Botha 5 年前
父节点
459795464a
当前提交
a77716e554
共有 11 个文件被更改，包括 3646 次插入 和 3644 次删除
分列视图 显示文件统计
  1. 1
    6
      basicvuetemplate/README.md
  2. 1
    1
      basicvuetemplate/babel.config.js
  3. 3420
    3545
      basicvuetemplate/package-lock.json
  4. 12
    15
      basicvuetemplate/package.json
  5. 4
    2
      basicvuetemplate/public/index.html
  6. 52
    20
      basicvuetemplate/src/App.vue
  7. 1
    0
      basicvuetemplate/src/assets/logo.svg
  8. 137
    51
      basicvuetemplate/src/components/HelloWorld.vue
  9. 6
    4
      basicvuetemplate/src/main.js
  10. 7
    0
      basicvuetemplate/src/plugins/vuetify.js
  11. 5
    0
      basicvuetemplate/vue.config.js

+ 1
- 6
basicvuetemplate/README.md 查看文件 

@@ -1,4 +1,4 @@
1 
-# basicvuetemplate
1 
+# phone
2 2
3 3 
 ## Project setup
4 4 
 ```
 
@@ -15,11 +15,6 @@ npm run serve
15 15 
 npm run build
16 16 
 ```
17 17
18 
-### Run your tests
19 
-```
20 
-npm run test
21 
-```
22 
-
23 18 
 ### Lints and fixes files
24 19 
 ```
25 20 
 npm run lint

+ 1
- 1
basicvuetemplate/babel.config.js 查看文件 

@@ -1,5 +1,5 @@
1 1 
 module.exports = {
2 2 
   presets: [
3 
-    '@vue/app'
3 
+    '@vue/cli-plugin-babel/preset'
4 4 
   ]
5 5 
 }

+ 3420
- 3545
basicvuetemplate/package-lock.json
文件差异内容过多而无法显示
查看文件


+ 12
- 15
basicvuetemplate/package.json 查看文件 

@@ -1,5 +1,5 @@
1 1 
 {
2 
-  "name": "basicvuetemplate",
2 
+  "name": "phone",
3 3 
   "version": "0.1.0",
4 4 
   "private": true,
5 5 
   "scripts": {
 
@@ -8,20 +8,22 @@
8 8 
     "lint": "vue-cli-service lint"
9 9 
   },
10 10 
   "dependencies": {
11 
-    "@nuxtjs/axios": "^5.6.0",
12 
-    "core-js": "^2.6.5",
11 
+    "core-js": "^3.4.3",
13 12 
     "vue": "^2.6.10",
14 
-    "vue-router": "^3.1.3",
15 
-    "vuex": "^3.1.1"
13 
+    "vuetify": "^2.1.0"
16 14 
   },
17 15 
   "devDependencies": {
18 
-    "@vue/cli-plugin-babel": "^3.11.0",
19 
-    "@vue/cli-plugin-eslint": "^3.11.0",
20 
-    "@vue/cli-service": "^3.11.0",
21 
-    "babel-eslint": "^10.0.1",
16 
+    "@vue/cli-plugin-babel": "^4.1.0",
17 
+    "@vue/cli-plugin-eslint": "^4.1.0",
18 
+    "@vue/cli-service": "^4.1.0",
19 
+    "babel-eslint": "^10.0.3",
22 20 
     "eslint": "^5.16.0",
23 21 
     "eslint-plugin-vue": "^5.0.0",
24 
-    "vue-template-compiler": "^2.6.10"
22 
+    "sass": "^1.19.0",
23 
+    "sass-loader": "^8.0.0",
24 
+    "vue-cli-plugin-vuetify": "^2.0.2",
25 
+    "vue-template-compiler": "^2.6.10",
26 
+    "vuetify-loader": "^1.3.0"
25 27 
   },
26 28 
   "eslintConfig": {
27 29 
     "root": true,
 
@@ -37,11 +39,6 @@
37 39 
       "parser": "babel-eslint"
38 40 
     }
39 41 
   },
40 
-  "postcss": {
41 
-    "plugins": {
42 
-      "autoprefixer": {}
43 
-    }
44 
-  },
45 42 
   "browserslist": [
46 43 
     "> 1%",
47 44 
     "last 2 versions"

+ 4
- 2
basicvuetemplate/public/index.html 查看文件 

@@ -5,11 +5,13 @@
5 5 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 7 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
-    <title>basicvuetemplate</title>
8 
+    <title>phone</title>
9 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
9 11 
   </head>
10 12 
   <body>
11 13 
     <noscript>
12 
-      <strong>We're sorry but basicvuetemplate doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 
+      <strong>We're sorry but phone doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 15 
     </noscript>
14 16 
     <div id="app"></div>
15 17 
     <!-- built files will be auto injected -->

+ 52
- 20
basicvuetemplate/src/App.vue 查看文件 

@@ -1,28 +1,60 @@
1 1 
 <template>
2 
-  <div id="app">
3 
-    <img alt="Vue logo" src="./assets/logo.png">
4 
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
5 
-  </div>
2 
+  <v-app>
3 
+    <v-app-bar
4 
+      app
5 
+      color="primary"
6 
+      dark
7 
+    >
8 
+      <div class="d-flex align-center">
9 
+        <v-img
10 
+          alt="Vuetify Logo"
11 
+          class="shrink mr-2"
12 
+          contain
13 
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
14 
+          transition="scale-transition"
15 
+          width="40"
16 
+        />
17 
+
18 
+        <v-img
19 
+          alt="Vuetify Name"
20 
+          class="shrink mt-1 hidden-sm-and-down"
21 
+          contain
22 
+          min-width="100"
23 
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
24 
+          width="100"
25 
+        />
26 
+      </div>
27 
+
28 
+      <v-spacer></v-spacer>
29 
+
30 
+      <v-btn
31 
+        href="https://github.com/vuetifyjs/vuetify/releases/latest"
32 
+        target="_blank"
33 
+        text
34 
+      >
35 
+        <span class="mr-2">Latest Release</span>
36 
+        <v-icon>mdi-open-in-new</v-icon>
37 
+      </v-btn>
38 
+    </v-app-bar>
39 
+
40 
+    <v-content>
41 
+      <HelloWorld/>
42 
+    </v-content>
43 
+  </v-app>
6 44 
 </template>
7 45
8 46 
 <script>
9 
-import HelloWorld from './components/HelloWorld.vue'
47 
+import HelloWorld from './components/HelloWorld';
10 48
11 49 
 export default {
12 
-  name: 'app',
50 
+  name: 'App',
51 
+
13 52 
   components: {
14 
-    HelloWorld
15 
-  }
16 
-}
17 
-</script>
53 
+    HelloWorld,
54 
+  },
18 55
19 
-<style>
20 
-#app {
21 
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 
-  -webkit-font-smoothing: antialiased;
23 
-  -moz-osx-font-smoothing: grayscale;
24 
-  text-align: center;
25 
-  color: #2c3e50;
26 
-  margin-top: 60px;
27 
-}
28 
-</style>
56 
+  data: () => ({
57 
+    //
58 
+  }),
59 
+};
60 
+</script>

+ 1
- 0
basicvuetemplate/src/assets/logo.svg 查看文件 

@@ -0,0 +1 @@
1 
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

+ 137
- 51
basicvuetemplate/src/components/HelloWorld.vue 查看文件 

@@ -1,58 +1,144 @@
1 1 
 <template>
2 
-  <div class="hello">
3 
-    <h1>{{ msg }}</h1>
4 
-    <p>
5 
-      For a guide and recipes on how to configure / customize this project,<br>
6 
-      check out the
7 
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 
-    </p>
9 
-    <h3>Installed CLI Plugins</h3>
10 
-    <ul>
11 
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 
-    </ul>
14 
-    <h3>Essential Links</h3>
15 
-    <ul>
16 
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 
-    </ul>
22 
-    <h3>Ecosystem</h3>
23 
-    <ul>
24 
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 
-    </ul>
30 
-  </div>
2 
+  <v-container>
3 
+    <v-layout
4 
+      text-center
5 
+      wrap
6 
+    >
7 
+      <v-flex xs12>
8 
+        <v-img
9 
+          :src="require('../assets/logo.svg')"
10 
+          class="my-3"
11 
+          contain
12 
+          height="200"
13 
+        ></v-img>
14 
+      </v-flex>
15 
+
16 
+      <v-flex mb-4>
17 
+        <h1 class="display-2 font-weight-bold mb-3">
18 
+          Welcome to Vuetify
19 
+        </h1>
20 
+        <p class="subheading font-weight-regular">
21 
+          For help and collaboration with other Vuetify developers,
22 
+          <br>please join our online
23 
+          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
24 
+        </p>
25 
+      </v-flex>
26 
+
27 
+      <v-flex
28 
+        mb-5
29 
+        xs12
30 
+      >
31 
+        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
32 
+
33 
+        <v-layout justify-center>
34 
+          <a
35 
+            v-for="(next, i) in whatsNext"
36 
+            :key="i"
37 
+            :href="next.href"
38 
+            class="subheading mx-3"
39 
+            target="_blank"
40 
+          >
41 
+            {{ next.text }}
42 
+          </a>
43 
+        </v-layout>
44 
+      </v-flex>
45 
+
46 
+      <v-flex
47 
+        xs12
48 
+        mb-5
49 
+      >
50 
+        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
51 
+
52 
+        <v-layout justify-center>
53 
+          <a
54 
+            v-for="(link, i) in importantLinks"
55 
+            :key="i"
56 
+            :href="link.href"
57 
+            class="subheading mx-3"
58 
+            target="_blank"
59 
+          >
60 
+            {{ link.text }}
61 
+          </a>
62 
+        </v-layout>
63 
+      </v-flex>
64 
+
65 
+      <v-flex
66 
+        xs12
67 
+        mb-5
68 
+      >
69 
+        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
70 
+
71 
+        <v-layout justify-center>
72 
+          <a
73 
+            v-for="(eco, i) in ecosystem"
74 
+            :key="i"
75 
+            :href="eco.href"
76 
+            class="subheading mx-3"
77 
+            target="_blank"
78 
+          >
79 
+            {{ eco.text }}
80 
+          </a>
81 
+        </v-layout>
82 
+      </v-flex>
83 
+    </v-layout>
84 
+  </v-container>
31 85 
 </template>
32 86
33 87 
 <script>
34 88 
 export default {
35 89 
   name: 'HelloWorld',
36 
-  props: {
37 
-    msg: String
38 
-  }
39 
-}
40 
-</script>
41 90
42 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
43 
-<style scoped>
44 
-h3 {
45 
-  margin: 40px 0 0;
46 
-}
47 
-ul {
48 
-  list-style-type: none;
49 
-  padding: 0;
50 
-}
51 
-li {
52 
-  display: inline-block;
53 
-  margin: 0 10px;
54 
-}
55 
-a {
56 
-  color: #42b983;
57 
-}
58 
-</style>
91 
+  data: () => ({
92 
+    ecosystem: [
93 
+      {
94 
+        text: 'vuetify-loader',
95 
+        href: 'https://github.com/vuetifyjs/vuetify-loader',
96 
+      },
97 
+      {
98 
+        text: 'github',
99 
+        href: 'https://github.com/vuetifyjs/vuetify',
100 
+      },
101 
+      {
102 
+        text: 'awesome-vuetify',
103 
+        href: 'https://github.com/vuetifyjs/awesome-vuetify',
104 
+      },
105 
+    ],
106 
+    importantLinks: [
107 
+      {
108 
+        text: 'Documentation',
109 
+        href: 'https://vuetifyjs.com',
110 
+      },
111 
+      {
112 
+        text: 'Chat',
113 
+        href: 'https://community.vuetifyjs.com',
114 
+      },
115 
+      {
116 
+        text: 'Made with Vuetify',
117 
+        href: 'https://madewithvuejs.com/vuetify',
118 
+      },
119 
+      {
120 
+        text: 'Twitter',
121 
+        href: 'https://twitter.com/vuetifyjs',
122 
+      },
123 
+      {
124 
+        text: 'Articles',
125 
+        href: 'https://medium.com/vuetify',
126 
+      },
127 
+    ],
128 
+    whatsNext: [
129 
+      {
130 
+        text: 'Explore components',
131 
+        href: 'https://vuetifyjs.com/components/api-explorer',
132 
+      },
133 
+      {
134 
+        text: 'Select a layout',
135 
+        href: 'https://vuetifyjs.com/layout/pre-defined',
136 
+      },
137 
+      {
138 
+        text: 'Frequently Asked Questions',
139 
+        href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
140 
+      },
141 
+    ],
142 
+  }),
143 
+};
144 
+</script>

+ 6
- 4
basicvuetemplate/src/main.js 查看文件 

@@ -1,8 +1,10 @@
1 
-import Vue from 'vue';
2 
-import App from './App.vue';
1 
+import Vue from 'vue'
2 
+import App from './App.vue'
3 
+import vuetify from './plugins/vuetify';
3 4
4 5 
 Vue.config.productionTip = false
5 6
6 7 
 new Vue({
7 
-  render: h => h(App),
8 
-}).$mount('#app')
8 
+  vuetify,
9 
+  render: h => h(App)
10 
+}).$mount('#app')

+ 7
- 0
basicvuetemplate/src/plugins/vuetify.js 查看文件 

@@ -0,0 +1,7 @@
1 
+import Vue from 'vue';
2 
+import Vuetify from 'vuetify/lib';
3 
+
4 
+Vue.use(Vuetify);
5 
+
6 
+export default new Vuetify({
7 
+});

+ 5
- 0
basicvuetemplate/vue.config.js 查看文件 

@@ -0,0 +1,5 @@
1 
+module.exports = {
2 
+  "transpileDependencies": [
3 
+    "vuetify"
4 
+  ]
5 
+}

撰写 预览
正在加载...
取消
保存