1, Construction of SPA project through Vue cli scaffolding
1. Install Vue cli
npm install -g vue-cli
npm install -g webpack
After successful installation, the following files will appear:
D:\initPath
node-v10.15.3-win-x64
node_global
vue
vue.cmd
vue-init
vue-init.cmd
vue-list
vue-list.cmd
Step 1: use scaffold to create project skeleton
This step can be understood as: create a maven web project using eclipse
Enter cmd in the project storage location to enter the black window and enter vue init webpack spa for question and answer mode
Input: vue init webpack spa
: "one question and one answer" mode
1.Project name: project name; the default is the name spa1 entered; enter directly
2.Project description: project description. Press enter directly
3.Author: author, just fill in or enter y
4.Vue build: multiple choice questions, usually the first one
4.1 runtime + compiler: recommended for most users / / run and compile, which is officially recommended
4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files
-render functions are required elsewhere / / select the first one when there are already recommendations during runtime only
Ll Vue Router: select whether to use Vue router, Y, so that the generated project will have relevant routing configuration files
6.Use ESLint to lint your code: whether to use ESLint to limit your code errors and styles. N Novices don't need it, but they are generally used in actual projects, so that multi person development can achieve consistent syntax
7.Set up unit tests: whether to install unit test N
8.Setup e2e tests with Nightwatch?: Is E2E testing installed N
9.Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself // Multiple choice question: select the first item "Yes, use NPM" and whether to use npm install to install dependencies
Select all and press enter to generate the project. The following content indicates that the project is created
# Project initialization finished!
# ========================
If you really won't choose it, press enter and select "default" or "N" not to install
Step 2: after running the above command, we need to change the current path to the SPA folder, and then install the required modules
This step can be understood as: after maven's web project is successfully created, modify the pom file and add dependencies
cd spa1 # Change the path to the Spa1 folder
npm install # Install all NPM modules required for the project
Step 3: start and access the project
This step can be understood as: start tomcat and access the project through the browser
cd spa npm run dev
After execution in sequence, a web address will pop up: http://localhost:8080
2, Component development process based on SPA project
Our development mode is a separate front-end and back-end development mode, so we need a back-end server and a front-end server. Later, we need to open a front-end server and a Tomcat. If the port is not changed, it will conflict with the port, so we need to modify it. Modify the index.js in config in the project:
config --> index.js
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
host: 'localhost',
port: 8081, // Modify the port number here
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
},
Everything that ends with vue is a component
As shown in the figure above, what you see is not the index.html page. Index.html is an entry. You don't need to write any code in the future. What you see is the component App.vue. The real entry is mian.js, which binds App.vue to index.html
Therefore, the whole large page seen on the page is index.html, which packages an App.vue component, as shown in the figure
The picture is in App.vue, and the anchor point is defined below the picture (as mentioned in the previous blog about anchor Vue)
Step 1: kill the pictures in the App
Step 2: create a new file (Home) ending with Vue, which can be written with reference to HelloWorld.vue
Home.vue:
<template>
<div>
home page
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
Enter index.js to modify the access path and change the original HelloWorld to Home:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
Total code:
App.vue:
<template>
<div id="app">
<router-link to="/Home">home page</router-link>
<router-link to="/Abort">about</router-link>
<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>
Abort.vue:
<template>
<div>
Display webmaster and website related information
</div>
</template>
<script>
export default {
name: 'Abort',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
Home.vue:
<template>
<div>
Show all blog content here
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
index.js: configure jump path:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/Abort',
name: 'Abort',
component: Abort
}
]
})
3, Nested routing
AbortMe.vue:
<template>
<div>
Show webmaster's work experience and qualifications
</div>
</template>
<script>
export default {
name: 'AbortMe',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
AbortWebSite.vue:
<template>
<div>
Show the significance, development history and vision of website construction
</div>
</template>
<script>
export default {
name: 'AbortWebSite',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
Abort.vue:
<template>
<div>
<router-link to="/AbortMe">About webmaster</router-link>
<router-link to="/AbortWebSite">About this site</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Abort',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
index.js configuration:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'
import AbortMe from '@/components/AbortMe'
import AbortWebSite from '@/components/AbortWebSite'
Vue.use(Router)
export default new Router({
routes: [{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/Abort',
name: 'Abort',
component: Abort,
/* nesting*/
children: [{
path: '/AbortWebSite',
name: 'AbortWebSite',
component: AbortWebSite
},{
path: '/AbortMe',
name: 'AbortMe',
component: AbortMe,
}
]
}
]
})
Thanks for watching!