Table of contents
1.3 Build the project using Vue-cli
2.1 Import and run SPA project
2.2 Vue project structure description
2.4 Complete routing based on SPA project
2.5 Complete nested routing based on SPA project
1. Vue-cli installation
1.1 What is Vue-cli
Vue CLI is an official scaffolding tool based on Vue.js. It is used to automatically generate vue.js+webpack project templates and quickly build a development environment for Vue.js projects. It provides an interactive command line interface that can help developers initialize projects, configure build tools, manage dependencies, etc. Vue CLI integrates some commonly used development tools and best practices, allowing developers to develop Vue.js applications more efficiently.
Create command: vue init webpack xxx
- xxx creates a name for the project for yourself
- You must first install some necessary environments such as vue, vue-cli, webpack, node, etc.
1.2 Install Vue-cli
Command: npm install -g vue-cli
Enter the following command in the cmd window to verify whether the vue installation is successful. Note: the V here is capitalized. If successful, the version number will be printed
vue -V1.3 Build the project using Vue-cli
Open the cmd command window in the file path to be saved, create the project storage directory, and run the following command:
vue init webpack 项目名
Next, the installer will enter a question-and-answer installation mode:
1) Project name: Project name, the default is the name ycxw_spa when entered, just press Enter
2) Project description: Project description, just press Enter
3) Author: Author, fill it in casually or press enter
4) Vue build: Multiple choice question, usually choose the first oneRuntime + Compiler: recommended for most users //运行加编译，官方推荐 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时5) Install vue-router: Whether you need vue-router, Y choose to use it, 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 style . N7) Set up unit tests : Whether to install unit tests N
8) Setup e2e tests with Nightwatch?: Whether to install e2e tests N
9) Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM (select this option)
Yes, use Yarn
No, I will handle that myselfSelect everything and press Enter to generate the project:
Finally, Project initialization finished! appears and the download is complete:
2. SPA project
2.1 Import and run SPA project
Find the file path of the previously built spa project and import it in the programming software:
1. Return to our cmd command window and enter this command
cd project name (ycxw_spa)
2. Enter npm run dev command to run
Open this page to run:
2.2 Vue project structure description
Folder: build
Function: This folder is mainly used for some configurations of webpack.
File:
webpack.base.conf.js Webpack basic configuration, development environment, and production environment all depend on
webpack.dev.conf.js webpack development environment configuration
webpack.prod.conf.js webpack production environment configuration
build.js production environment build script
vue -loader.conf.js This file is the configuration file for processing .vue files
Folder: config
Function: Configuration file
Files:
dev.env.js Configure the development environment
prod.env.js Configure the production environment
index.js This file configures the proxy server, for example: modify the port number
node_modules stores the npm installation package generated according to the package.json configuration during npm install folder
Folder: src
Function: Source code directory (the most commonly used folder in development)
Files:
assets, shared styles and image
components, where the business code is stored. It is divided into components for storage. A page is a component, and a page will also contain many components. Router Sets
routing (defines the relationship between routing and components)
App.vue vue file entry interface
main.js corresponds to App.vue to create a vue instance, which is also an entry file and corresponds to the entry configuration in webpack.base.config.js
static folder:
The stored files will not be processed by webpack and can be referenced directly. For example, if you want to reference a swf file, you can configure it in webpack. For the loader that processes files with the swf suffix, you can also directly place the swf file in this folder for reference.
package.json：This file has two parts that are useful: setting commands in scripts and dependencies and devDependencies, which correspond to globally downloaded and locally downloaded dependency packages respectively.
2.3. What is *.vue file
The *.vue file is a custom file type that uses HTML-like syntax to describe a Vue component. Each .vue file contains three types of top-level language blocks : <template>, <script> and <style> . These three parts represent html, js, and css respectively.
Note:
HTML code cannot be wrapped directly in <template></template>. Instead, an html tag must be placed inside to wrap all code. Generally, <div></div> tags are used to include other codes, as well. Other tags can be used, as long as there is a root element.
<template>
<div>
...
</div>
</template>js code is written in <script> tag and exported through export
<script>
export default {
name: 'App'
}
</script>2.4 Complete routing based on SPA project
When building the spa project, it has already made a default welcome interface. Next, we only need to make a custom component according to its format.
1. Create a custom component in components under src.
Hone.vue
<template>
<div>
<h1>{
{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to 网站首页'
}
}
}
</script>
<style>
</style>
About.vue
<template>
<div>
<h1>{
{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to 云村小威 个人网站'
}
}
}
</script>
<style>
</style>
2. Define routing and configure routing paths
Add routing and configure the routing path in index.js under the router folder :
1. First, we imported the Vue and Vue Router modules:
import Vue from 'vue' import Router from 'vue-router'This way we can use the functionality of Vue and Vue Router in our code.
2. Next, we imported some components:
import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import About from '@/components/About'These components are defined in other files by specifying their paths using the @ symbol.
3. Then, we use the Vue Router plugin:
Vue.use(Router)In this way, Vue can use the functions of Vue Router.
4. Finally, we export a new Router instance, which contains routing configuration information:
export default new Router({ routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About, }] })In this configuration, we define several routing rules. Each routing rule contains a path, a name, and a component. When users access different paths, Vue Router will load the corresponding components according to the configured rules.
For example:
When the user accesses the root path ('/'), the component named 'HelloWorld' will be loaded; when the user accesses the '/Home' path, the component named 'Home' will be loaded; when the user accesses the '/About' path When , the component named 'About' will be loaded, and two sub-routes are also defined, namely '/AboutMe' and '/AboutWebsite', which correspond to components named 'AboutMe' and 'AboutWebsite' respectively.
In this way, we have completed the configuration of Vue Router and can use these routing rules to implement page navigation and component loading in Vue applications.
Complete example:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/Home',
name: 'Home',
component: Home
}, {
path: '/About',
name: 'About',
component: About
}]
})
3. Define the button that triggers the route
Find the button triggered by the route defined in Aue.js:
<template>
<div id="app">
<img src="./assets/vue.png" style="width: 350px;height: 250px;"><br>
<router-link to="/Home">首页</router-link>
<router-link to="/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>
4. Run the test
2.5 Complete nested routing based on SPA project
1. Example: Prepare to nest other components in the About.vue component
<template>
<div>
<h1>{
{ msg }}</h1><br />
<router-link to="/AboutMe">关于我</router-link>
<router-link to="/AboutWebsite">关于本站</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to 云村小威 个人网站'
}
}
}
</script>
<style>
</style>
Note: Be sure to add <router-view></router-view>
It is a placeholder tag in Vue Router. Its function is to display the component content corresponding to the current route.
When you use Vue Router in a Vue application and configure routing rules, the <router-view></router-view> tag will dynamically render the corresponding component content based on the current routing path.
2. Customize the components that need to be nested
AboutMe.vue
<template>
<div>
<img src="../assets/自拍照.png" style="width: 200px;height: 200px;"/>
</div>
</template>
<script>
export default {
name: 'AboutMe'
}
</script>
<style>
</style>
AboutWebsite.vue
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default {
name: 'AboutWebsite',
data() {
return {
msg: '关于本站无需多言，帅说明了一切...'
}
}
}
</script>
<style>
</style>3. Effect demonstration
