Vue development

Meimei Fairy 2021-02-23 16:06:51
vue development


VUE Development

Rapid prototyping

have access to vue serve and vue build Command to single .vue File for rapid prototyping . But it needs to be installed first @vue/cli-service-global plug-in unit .

npm install -g @vue/cli-service-global
 Copy code 

Create a new one .vue file , Then start a service and run the prototype :

vue serve file name .vue
 Copy code 

Scaffolding creation project

Official address

vue create
vue create my-vue
 Copy code 

choice Default ([Vue 2] babel, eslint) That's all right. .

If you want to configure it yourself , Then you can choose the third one :

Default or select the default configuration babel、linter, Others choose according to their own needs .

enter next step :(2.x Version and 3.x Version selection )

enter Next step into EsLint To configure :( Very strict or just prompt in the command line , It is recommended to choose the first one by default )

enter next step :( Do it when you save it Lint When it's submitted )

enter next step :( Configuration file selection )

And then execute :

cd Project name

yarn serve

Then open it in the browser http://192.168.8.132:8080/ You can see the welcome screen .

Project document description :

vue ui

Graphical project management :

vue ui
 Copy code 
Installing a plug-in

Vue CLI Using a plug-in based architecture . The plug-in can be modified webpack Internal configuration , Also you can ask the vue-cli- service Injection order . In the process of project creation , Most of the features listed are implemented through plug-ins .

Install a plug-in in a project that has been created , have access to vue add command . For example, install the routing plug-in :

vue add router
 Copy code 

( Then you will be prompted to change the code )

Input y continue :

And then you type in y, Plug in added successfully .

( Add the plug-in , There may be disruptive structural changes to the project , Even the modification of the file content . For example, view main.js and App.vue. So it's better to back up the version before installation .)

Processing resource paths

When you are in JavaScript、CSS or *.vue Use relative paths in files ( Must be . start ) When referring to a static resource , The resource will be webpack Handle .

Conversion rules :

  • If URL It's an absolute path ( for example /images/foo.png ), It will remain unchanged .

    <img alt="logo" src="/assets/pyy.png"> // Will be in public Look in the folder , The name will not be changed :webpack It won't be right public Do anything
    <img alt="pyy" src="https://www.baidu.com/xxx/pyy.png"> // Address access in the picture server
     Copy code 
  • If URL With . The beginning will be interpreted as a relative module request and based on the file system relative path .

    // Will be webpack compile ( Open the inspector to see the picture src, We can see that the result of the final compilation is the file hash)
    // About pictures webpack Operation done : Images are processed in batches , Use it as a resource 、 Module to do the processing , If it's small enough , Will turn it into url route , Do string encoding . If it's big enough , Will have a proper name , Put it in the right place .
    <img alt="logo" src="./assets/pyy.png">
     Copy code 
  • If URL With @ The beginning will be parsed as a module request .Vue CLI By default, a point to src Another name for @ .

    <img alt="logo" src="@/assets/pyy.png"> // @ representative src root directory
     Copy code 
  • Expand : If URL With ~ The beginning will be parsed as a module request . This means that you can even quote Node Resources in the module (node_modules Medium )

    <img src="~xxx-npm-package/pyy.png">
     Copy code 

So when to use public Folder ?

adopt webpack And get the following benefits :

  • Scripts and stylesheets are compressed and packaged together , To avoid additional network requests .

  • If the file is lost, an error will be reported directly during compilation , It's not generated on the client side 404 error .

  • The resulting file name contains the content hash , So don't worry about browsers caching their old versions .

Use public Scene :

  • You need to specify a fixed file name in the build output .

  • There are so many pictures , You need to dynamically reference their paths .

  • Compatibility needs to be considered , Use script Tags introduced .

Be careful :

If the application is packaged and uploaded to the server , Not deployed at the root of the domain name , Then configuration is required publicPath Prefix :

On the outermost layer of the project , Add a vue.config.js file , Add the following code to the file :

module.exports = {
// Judge the current running environment Production environment or development environment
// Add... To the production environment / The folder name in the deployment server /, You don't add
publicPath: process.env.NODE_ENV === 'production'? '/ The folder name in the deployment server /': '/'
}
 Copy code 
The preprocessor

If you don't select the preprocessor you need when you create the project (Sass/Less/Stylus), You need to manually install the corresponding loader.

# Sass
yarn add sass-loader node-sass
# Less
yarn add less-loader less
# Stylus
yarn add stylus-loader stylus
 Copy code 

The installation is complete , You can use it .

<style scoped lang='scss'>
$color: green;
h1 {
color: $color;
}
</style>
 Copy code 

Be careful : When <style> The label has scoped Attribute , its CSS Only the elements in the current component , The principle is through the use of PostCSS To implement the transformation .

<template>
// Add custom attributes to tags data-v-f3edg9
<div class="green" data-v-f3edg9>hi</div>
</template>
<style>
// Tag added custom properties and postcss Corresponding
.green[data-v-f3edg9] {
color: green;
}
</style>
 Copy code 

Expand 1:

If we need to use many components scss Variable , So what to do , At this time, we can put forward the public opinion . Like the one above us $color: green Variables are put forward to .

stay src So let's make a new one styles Folder , And then add a common.scss file , hold $color: green Cut into this file .

Then install style-resources-loader plug-in unit .

yarn add style-resources-loader
 Copy code 

And then in vue.config.js In file , Change the code to :

const path = require('path')
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/common.scss'),
],
})
}
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/ The folder name in the deployment server /': '/',
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
},
}
 Copy code 

And then restart the project .

At the beginning of the program , Load this file first , Then all the other files can be used .

Expand 2:

Depth action selector : >>>

In Africa css In the preprocessor , Use >>> Operators can make scoped A selector in the pattern works “ deeper ”, For example, influence

Child components ( It must be written in scoped In the style ).

<style scoped>
#app >>> p {
color: green
}
</style>
 Copy code 

stay css The preprocessor cannot parse properly >>> . We use /deep/ or ::v-deep The operator .

<style scoped lang="scss">
#app {
// /deep/ p{
// color: green;
// }
::v-deep p{
color: green;
}
}
</style>
 Copy code 

route

Official address

install

If you didn't choose to create a project before router, Then you need to install the routing plug-in .

vue add router
 Copy code 
Based on using

stay router/index.js, Routing can be configured .

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// Use webpack+vue Provide asynchronous components to achieve lazy loading
// In the future, the code will be split into a separate chunk( The pattern of fragmentation )
// Only access to this route , To download this component in real time , Because it's packed separately , This will shorten the loading time
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
 Copy code 
Route exit

Generally in App.vue in , Use the total exit of the route : <router-view></router-view>

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- The exit of the route -->
<router-view/>
</div>
</template>
 Copy code 
Dynamic routing matching

We often need to match a pattern to all the routes , All mapped to the same component . for example , We have a Detail Components , For all ID Different products , Use this component to render . that , We can do it in vue-router Used in the routing path of “ Dynamic path parameters ”(dynamic segment) To achieve this effect :

{ path: '/detail/:id', component: Detail }
 Copy code 
 // router/index.js Add :
{
// :id Mark dynamic routing
path: '/detail/:id',
name: 'Detail',
component: () => import('../views/Detail.vue')
},
 Copy code 
Route navigation

grammar :<router-link :to='' />

Use router-link Route navigation is available ,to It's about navigating to where , It says routing path.

Use :

 <li v-for="item of goodsList" :key='item.id'>
<router-link :to='`/detail/${item.id}`'>
{{item.name}} - {{item.price | symbol("$")}}
</router-link>
</li>
 Copy code 

obtain :

<template>
<div>
<h1> Product details page </h1>
<p>{{$route.params.id}}</p>
</div>
</template>
<script>
export default {
// Respond to changes in routing parameters
// If you don't listen like this , So when switching between multiple , Components for performance , There will be no destruction or reconstruction , That is to say, below mounted perhaps created No more triggers
watch: {
$route: {
immediate: true,
// deep: true,
handler() {
console.log(' adopt id To get the details ');
}
}
},
mounted () {
console.log(this.$route.params.id);
},
created () {
console.log(' Initiate request ');
},
}
</script>
 Copy code 
wildcard
 {
// Will match all paths
// Match from top to bottom , When nothing else matches , It means the route is wrong , At this time, we can load what we write 404 Prompt page
// In general , Will be put to the end
path: '*',
component: () => import('../views/404.vue')
}
 Copy code 
Nested Route

The actual application interface , It is usually composed of multiple nested components . similarly ,URL The dynamic path of each segment in also corresponds to the nested components of each layer according to a certain structure .

Add... To the routing object children attribute , Value is an array object .

 {
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
children: [
{
path: 'detail/:id',
name: 'Detail',
component: () => import('../views/Detail.vue')
}
]
},
 Copy code 

reform about Page add nested route exit :

<template>
<div class="about">
<h1>about</h1>
<ul>
<li v-for="item of goodsList" :key='item.id'>
<router-link :to='`/about/detail/${item.id}`'>
{{item.name}} - {{item.price | symbol("$")}}
</router-link>
</li>
</ul>
<!-- Nested route exit -->
<router-view></router-view>
</div>
</template>
 Copy code 

This is the time ,(1) visit /detail/:id, It's a separate detail page ,(2)/about It's a list of products ,(3)/about/detail/:id It's the product list, and the product details .

Routing jump

grammar :router.push(location, onComplete?, onAbort?)

// character string
router.push('/')
// object
router.push({ path: `/about/detail/${item.id}` })
// Named route
router.push({
name: 'Detail', // In the routing file , To match We wrote name value
params: { id: item.id } // Parameters
})
// With query parameters , It will eventually become /goods?price=100
router.push({ path: 'goods', query: { price: 100 }})
 Copy code 
Road load by lazy

Lazy loading of routing components can divide components corresponding to different routes into different code blocks , Then the corresponding component is loaded when the route is accessed , It's more efficient .

Block components by component :

() => import(/* webpackChunkName: "group-about" */ "../views/About.vue")
 Copy code 

Advanced routing

Route guard

vue-router The navigation guard provided is mainly used to guard the navigation by jumping or canceling . There are many opportunities to be embedded in the routing navigation process : Overall , Single route exclusive , Or component level .

Global guard
router.beforeEach((to, from, next) => {
xxx Code
// to: Route: The goal to enter Routing objects
// from: Route: The route that the current navigation is about to leave
// next: Function: Be sure to call this method resolve This hook .
})
 Copy code 

stay router/index.js in , add to

// Global guard
// to: Where to go from: Where to come from next: release
router.beforeEach((to, from, next) => {
// Judge whether the route needs to be guarded
// meta data
if (to.meta.auth) {
// Log in
if (window.isLogin) { // If you save a variable globally isLogin, To determine whether to log in or not
next() // release
} else {
next('/login?redirect='+to.fullPath) // Jump to landing , Then log in successfully and redirect to the page you want to go to
}
} else {
next()
}
})
 Copy code 
Route exclusive guard

And the global guard beforeEach The parameters are consistent .

beforeEnter((to, from, next) => {
xxx Code
// to: Route: The goal to enter Routing objects
// from: Route: The route that the current navigation is about to leave
// next: Function: Be sure to call this method resolve This hook .
})
 Copy code 

for example :

 {
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children: [
{
path: 'detail/:id',
name: 'Detail',
component: () => import('../views/Detail.vue')
}
],
beforeEnter(to, from, next) {
// Log in
if (window.isLogin) { // If you save a variable globally isLogin, To determine whether to log in or not
next() // release
} else {
next('/login?redirect=' + to.fullPath) // Jump to landing , Then log in successfully and redirect to where you want to go page
}
}
},
 Copy code 
Guard inside the assembly

You can directly define the following routing navigation guards in the routing component ( Methods written in components ):

  • beforeRouteEnter

  • beforeRouteUpdate

  • beforeRouteLeave

// About.vue
beforeRouteEnter(to, from, next) {
if (window.isLogin) {
next();
} else {
next("/login?redirect=" + to.fullPath);
}
}
 Copy code 

Dynamic routing

adopt router.addRoutes(routes) Way to dynamically add routes

For example, it is very common to require users to log in , Otherwise, you have to go to the login page .

Change the global guard to :

router.beforeEach((to, from, next) => {
// Logged in
if (window.isLogin) {
if (to.path === '/login') {
// There is no need to go to the login page , Redirect to home page
next('/')
} else {
// Go to other pages
next()
}
} else {
// No sign in
if (to.path === '/login') {
// If you want to go to the landing page, just let it go
next()
} else {
// Otherwise, redirect to the login page
next('/login?redirect=' + to.fullPath)
}
}
})
 Copy code 

modify Login.vue, When the user logs in successfully, dynamically add /about

 login() {
window.isLogin = true;
// Note that the parameters need to be array objects , If you are not logged in , Then there won't be this route
this.$router.addRoutes([{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// Use webpack+vue Provide asynchronous components to achieve lazy loading
// In the future, the code will be split into a separate chunk( The pattern of fragmentation )
// Only access to this route , To download this component in real time , Because it's packed separately , This will shorten the loading time
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
children: [
{
path: "detail/:id",
name: "Detail",
component: () => import("../views/Detail.vue")
}
],
beforeEnter(to, from, next) {
// Log in
if (window.isLogin) {
// If you save a variable globally isLogin, To determine whether to log in or not
next(); // release
} else {
next("/login?redirect=" + to.fullPath); // Jump to landing , Then log in successfully and redirect to where you want to go page
}
}
}]);
// Using parameters with query , So it's getting query
this.$router.push(this.$route.query.redirect);
}
 Copy code 

then , Think about it , Although the authority authentication has been done , But there's a problem , When I refresh , The added route is gone , We have to go through the login process , This must be unreasonable , So how to solve it ? Try it on your own .

Component cache

keep-alive

utilize keepalive Do component caching , Keep component state , Improve execution efficiency .

for example : cache about Components .

stay App.vue in , Modified code :

 <!-- Cache components -->
<keep-alive include="about" max='5'>
<!-- Pay attention to include Or exclude when , To match is in the component name value , Not in routing name -->
<!-- include Is the component to cache ,exclude Is a component that is not cached , If more than one ,name Values are separated by commas , for example include="about,detail" -->
<!-- attribute max, Is the maximum number that needs to be cached , If it goes beyond , Will cache the oldest t get out , Add the latest cache , To optimize resources -->
<router-view/>
</keep-alive>
 Copy code 

because keep-alive Appearance , There are two special hooks :activated、deactivated.

stay about Component to monitor :

 // By keep-alive The cache triggers
activated(){
console.log('activated');
},
deactivated(){
console.log('deactivated');
},
 Copy code 

github Code address

版权声明
本文为[Meimei Fairy]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223155148544x.html

  1. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  2. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  3. react-native版文字跑马灯
  4. React native text running lantern
  5. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  6. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  7. this.byId(SupplierForm).bindElement in SAP UI5
  8. SAP UI5 JavaScript文件的lazy load - 懒加载
  9. this.byId (SupplierForm).bindElement in SAP UI5
  10. Lazy load lazy load of SAP ui5 JavaScript files
  11. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  12. How to connect the ground gas to the micro front end?
  13. How to transform single / micro service application into serverless application
  14. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  15. Seven array methods for JavaScript you need to master in 2021
  16. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  17. Seven array methods for JavaScript you need to master in 2021
  18. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  19. Seven array methods for JavaScript you need to master in 2021
  20. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  21. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  22. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  23. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  24. 前端面试常考题:JS垃圾回收机制
  25. Frequently asked questions in front end interview: JS garbage collection mechanism
  26. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  27. Java之HTTP网络编程(一):TCP/SSL网页下载
  28. HTTP network programming in Java (1): TCP / SSL web page download
  29. Java之HTTP网络编程(一):TCP/SSL网页下载
  30. HTTP network programming in Java (1): TCP / SSL web page download
  31. 使用vite搭建vue项目
  32. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  33. 在 vue 中通过 express 连接数据库
  34. Using vite to build Vue project
  35. Display PDF file in component: Vue pdf
  36. Connecting database through express in Vue
  37. 2021届秋招哈啰出行前端面经(一面)
  38. vue使用sdk进行七牛云上传
  39. Javascript性能优化【内联缓存】 V8引擎特性
  40. Small true wireless smart headset evaluation: put intelligence into the ear
  41. The front end experience of the 2021 autumn recruitment
  42. Vue uses SDK to upload Qi Niu cloud
  43. 深入理解 Web 协议 (三):HTTP 2
  44. dhtmlxGantt如何重新排序任务
  45. JavaScript performance optimization [inline cache] V8 engine features
  46. 深入理解 Web 协议 (三):HTTP 2
  47. Deep understanding of Web protocol (3): http 2
  48. 深入理解 Web 协议 (三):HTTP 2
  49. How dhtmlxgantt reorders tasks
  50. 深入理解 Web 协议 (三):HTTP 2
  51. JavaScriptBOM操作
  52. JavaScriptBOM操作
  53. Deep understanding of Web protocol (3): http 2
  54. Deep understanding of Web protocol (3): http 2
  55. dhtmlxGantt甘特图重新排序任视频教程
  56. vue实现七牛云上传图片功能
  57. vue.js环境配置步骤及npm run dev报错解决方案
  58. Deep understanding of Web protocol (3): http 2
  59. JavaScript BOM operation
  60. JavaScript BOM operation