In the previous article, I set up a Vue development environment, created a demo project, and compiled and deployed the Vue project with the help of nginx. This article takes a look at the structure of the Vue project. As shown below:
I created an empty project, and Vue scaffolding automatically generated so many files for me, which looked scary. Don’t be afraid, this is the power of scaffolding. Faced with this pile of files, how should we understand the project architecture and how to add our own functions? As a beginner, you can understand the project in the following order.
Next, we will introduce the uses of these five files in order.
Table of contents
1. Introduction to default generated files
1.5.src/components/HelloWorld.vue
1. Introduction to default generated files
1.1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.html is the entrance to the entire project. <div id="app"></div> means that this html is bound to a VUE object with the id of app.
1.2.src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
illustrate:
el: '#app': The id of the vue object is app
router：router
components: {App}: The component of vue is named App
template: '<App/>': The template is named App
A VUE object with the id of app is defined here, and index.html refers to this object through the id of app.
1.3.src/App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
illustrate:
export default {
name: 'App'
}
The component named App is exported, and main.js can reference it after exporting.
The template in src/App.vue can be understood as a fragment of html, and the fragments can be spliced to the corresponding position of html to form a complete page with content. <route-view/> is a route. Depending on the user's URL, it will be routed to different vue files to display different page content.
1.4.src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
src/router/index.js determines what content will be displayed in the <router-view/> position in App.vue.
path: '/': When the user accesses the http://localhost:8080/ root directory, it will be routed to the HelloWorld component by default. The content of this component will be displayed in <router-view/> in src/App.vue.
1.5.src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</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;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/HelloWorld.vue-style scaffolding generates Vue objects by default.
After running npm run dev, enter in the browser: http://localhost:8080
2. Add your own business code
2.1 Comment the tag in src/App.vue: <img src="./assets/logo.png">
2.2 The msg under export default in src/components/HelloWorld.vue is modified to "Hello Vue, I'm new here, please take care of me."
2.3 Modify src/router/index.js and add MyFirst.vue in the src/components directory
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import MyFirst from '@/components/MyFirst'
Vue.use(Router)
export default new Router({
routes: [
/*
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
*/
{
path: '/',
name: 'myfirst',
component: MyFirst
}
]
})
src/components/MyFirst.vue
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'MyFirst',
data () {
return {
msg: '这是我的第一个VUE页面'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
The running results are as follows:
2.4 Modify and modify src/router/index.js to add multiple routes
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
import MyFirst from '@/components/MyFirst'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/hello'
},
{
path: '/first',
name: 'first',
component: MyFirst
},
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
}
]
})
(1) Situation 1: http://localhost:8080/
(2) Case 2: http://localhost:8080/hello
(3) Situation three: http://localhost:8080/first
Scenario 3 http://localhost:8080/first hopes to access the first page, but the result is still the hello page, and the address in the browser has been modified to http://localhost:8080/first#/hello, causing the routing to be unsuccessful. Through the query, we found that Router has a parameter mode, changed it to mode: 'history', tested again, and found that it was OK.
