In the last issue, we explained the routing component and other functions. In this issue, we began to explain how to use vue for rapid and effective development.
- If there is component nesting, you need to provide multiple view containers
- At the same time, both router link and router view can add class names and set styles
route:
- Configure router link and router view of secondary navigation in the original template of primary navigation
- Configure the route and template of the secondary navigation in the corresponding primary navigation route configuration option children
path: '/music', component: Music, //The child routing is configured in the children option children: [{ path: 'lx', component: Lx },...]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-link to="/home">homepage</router-link> <router-link to="/music">music</router-link> <router-view></router-view> </div> <script src="./vue.js"></script> <script src="./vue-router.js"></script> <script> // Provide components let Home = { template: `<div>Home-----</div>` } let Music = { template: `<div>Music----- <router-link to="/music/pop">popular</router-link> <router-link to="/music/cal">classical</router-link> <router-view></router-view> </div>` } // Components of secondary routing let Detail = { template: `<div>Detail{{$route.params.id}}</div>` } let routes = [{ name: 'default', path: '/', redirect: '/home' }, { name: 'home', path: '/home', component: Home }, { name: 'music', path: '/music', component: Music, children: [{ path: "/music/:id", component: Detail }] }] const router = new VueRouter({ routes }) let vm = new Vue({ el: '#app', router, data: {} }) </script> </body> </html>2. Transition animation
- The basic usage is to nest the transition tag outside the tag we need to animate, and set the name attribute
- Vue provides encapsulated components of transition, which can be updated, removed from the list. In the case of new addition, entry / exit transition can be added to any element and component
<transition name="fade"> <div v-show="isShow"></div> </transition>
Code implementation:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #obox { width: 200px; height: 200px; background: #000; position: absolute; } #obtn { position: absolute; top: 200px; } /* 6 Class name */ .my-enter-to, .my-leave { left: 0; opacity: 1; } .my-enter, .my-leave-to { left: 200px; opacity: 0; } .my-enter-active, .my-leave-active { transition: all 2s; } </style> </head> <body> <div id="app"> <transition name="my"> <div id="obox" v-if="isShow"></div> </transition> <button id="obtn" @click="changShow">Button</button> </div> <script src="./vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { isShow: true }, methods: { changShow() { this.isShow = !this.isShow } } }) </script> </body> </html>3,vue-cli
3.1 installation
Latest version 4.0 installation
npm install -g @vue/cli # OR yarn global add @vue/cli
In case of 2.0:
npm install -g @vue/cli-init
If we already have an old version, we can uninstall the old version first:
npm uninstall vue-cli -g or yarn global remove vue-cli
You can also upgrade directly:
npm update -g @vue/cli # perhaps yarn global upgrade --latest @vue/cli
Note: when we use yarn to install, we need to install facebook's yarn package. For the detailed installation process, please check the official website of yarn
Check that our cli was successfully installed:
vue -V or vue --version
3.2. cli create project
vue create hello-world
After entering the directory: we choose yes
We choose the second babel, eslint installation, and then wait for the installation
Check whether the installation is successful
http://localhost:8080
The default port number is 8080. We can modify the configuration file in the config file of the project
module.exports = { lintOnSave: true, // Turn on the eslint code checking mechanism when saving code devServer: { // Real time saved and compiled configuration segment open:true, // Automatically open browser port: 12306 // Service running port } }
3.3 introduction to the project directory
|-- node_modules // Dependent packages required by the project |-- public // Static resource storage directory | |-- index.html // Project master container file | |-- favicon.ico // Project default index picture |-- src | |-- assets // Place some static resource files, such as pictures, icons and fonts | |-- components // Common component directory | |-- views // Business component catalog | |-- App.vue // Top level routing component | |-- main.js // Main entry file | |-- router.js // Routing profile |-- .editorconfig // Code specification profile |-- .eslintrc.js // eslint code specification check configuration file |-- .gitignore // File format to be ignored for git upload |-- babel.config.js // babel profile |-- package-lock.json // Package version dependent locking file |-- package.json // Project basic information profile |-- postcss.config.js // css preprocessor configuration file |-- vue.config.js // Webpack configuration file (consistent with webpack.config.js)4. Using cli to build a project
Import the styles required by the project into the project
- Install a fixed version of bootstrap
- npm i [email protected]
- After the installation, import the js file at the entrance
import "./../node_modules/bootstrap/dist/css/bootstrap.css"; // introduce import "./assets/index.css"; // Introducing index.css
Detailed code can view my source code
summaryIt's time to end the basics of Vue. For details, we can check the official operation manual of Vue and go to a higher level. Oh, come on