Краткое описание и навыки использования Vue

внешний интерфейс Vue.js Vuex Webpack vue-router
Краткое описание и навыки использования Vue

Эта статья в основном представляет собой сводку макросов.Если есть какая-то часть знаний, которую необходимо объяснить отдельно, она будет выпущена отдельно в соответствии с сообщением.

Подробное объяснение Vue-router

Начало

Конечно, великийОфициальный сайтНачал, многие новички, которые только изучили фреймворк, любят находить видеоуроки в интернете, например МООК, Я не рекомендую этот метод обучения, потому что автор видео позволит вам проследить за его мышлением, чтобы написать набор в его стиле. код, о котором очень страшно подумать.

На самом деле официальный сайт vuejs очень богат, и я думаю, что необходимо добавить закладки браузера, и его нужно читать постоянно, потому что новые документы будут обновляться, и если вы не обращаете внимание на официальный сайт часто , вы можете пропустить новый синтаксический сахар Опыт разработки должен быть тем, что нужно каждому разработчику.

начало проекта

Рекомендуется идти прямоvue-cliСкаффолдинг с самого начала проник в идею модульного программирования.

Хотя я не могу сказать, что такое модульное программирование, похоже, это так.

vue-cli@2+Я не буду упоминать старомодную операцию, установить скаффолдинг глобально, а затем использовать команду скаффолдинга cmd для извлечения шаблона веб-пакета.

Упомяните здесь, вы можете перейти на официальную самостоятельноgithubПерейдите к форку, а затем определите понравившийся шаблон, например, добавивvuexПодождите, ищите конкретную операцию сами.

Я также испытал это на прошлой неделеvue-cli@3.0, В настоящее время официально не выпущен, но, возможно, был использован, я не буду говорить об этом, пусть статьи по теме Nuggets.

Ссылкиvue.config.jsСвязанная конфигурацияconfig.md

Практичный

1. Вью

vueО грамматике говорить особо нечего, это не более чемtemplate,script,style, рекомендуется, согласноСпецификация грамматикинаписать.

eslintПлагин, который обеспечивает стандартное кодирование, не рекомендуется, и часто возникают необъяснимые ошибки.Компания может самостоятельно определить набор спецификаций, и его документирование также является хорошим выбором.

--------------- Резюме и советы ------------------

<template>
    <div :style="{color:$options.filters.txtToColor(msg)}"></div>
    <!-- 行内filter -->
</template>

import { txtToColor } from '/path/to/filters.js'
export default {
    name:'a',
    data(){
        return{
            msg:123,
            obj:{
                msg:321
            }
        }
    },
    filters:{
        txtToColor
    },
    watch:{
        'obj.msg'(newV,oldV){ //监听对象里的属性
            
        }
    }
}

<style lang="less/sass/stylus...">
</style>

2. Vue-маршрутизатор

routerСяомэнсинь, впервые услышавший это слово, может смутиться, потому чтоjqueryЯ привык писать.

потому чтоvueодностраничное приложение,routerНа самом деле бывшаяdomain.com/a.html,domain.com/b.htmlМногостраничная интеграция управляет несколькими модулями для многопутевого использования.

--------------- Резюме и советы ------------------

//router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

const router = new Router({
    //此处可以利用node环境变量来设置打包后项目放在服务器某个目录后，路由的根路径配置
    base: process.env.NODE_ENV==='development'?'/':'/some/dir/',
    //...routes
});
//很多人把beforeEach写到main.js
router.beforeEach((from,to,next)=>{
    //...某些拦截操作，是否登录权限等
    next()
});
export default router

Каждый уровень подмаршрутизации требует дополнительного уровняrouter-view, если вы просто хотите, чтобы URL-адрес браузера был семантическим, вы можете использоватьalias

//router.js
const router = new Router({
    routes:[
        {
            path:'/b',
            component:B,
            alias:'/a/c'//这样当路径为/a/c时  页面显示为B，router-view也会对应根路由
            //别名只能通过path跳转
        },
        {
            path:'/a',
            component:A,
            children:[
                {
                    path:'c',//这里要注意  空配置要写在后面。
                    //因为路由匹配到规则后就不会继续匹配了
                }
            ]
        }
    ]
})

Отложенная загрузка маршрута

Принцип заключается в том, чтобы пропускать маршруты, требующие ленивой загрузки, черезwebpackУпакованный отдельно и переключенный на соответствующий маршрут загружается файл js, что позволяет достичь скорости загрузки домашней страницы, но общий объем проекта станет больше.

//router.js
const router = new Router({
    routes:[
        {
            path:'/a',
            component:()=>import('path/to/A.vue')
        }
    ]
})

//package.json
"devDependencies":{
    //...
    "babel-plugin-syntax-dynamic-import": "^6.18.0"
    //...
}

//.babelrc
"plugins":["syntax-dynamic-import"]

3. Векс

vuexОфициальный плагин для управления состоянием (данными), эффективно управляет глобальными данными и внедряет экземпляры Vue, позволяя всем компонентам легко читать и записывать глобальные данные, позволяя всем компонентам напрямую обмениваться состоянием для завершения связи.

--------------- Резюме и советы ------------------

//store.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from '/path/to/moduleA.js'
Vue.use(Vuex);

const store = new Vuex.Store({
    strict:process.env.NODE_ENV==="development",//开发环境开启严格模式
    state:{
        test:666
    },
    getters:{
        
    },
    mutations:{
        testCommit(state,opt){
            
        }
    },
    actions:{
        testAction({commit}){
            
        }
    },
    modules:{
        moduleA
    }
})


//moduleA.js
export default {
    namespaced:true,//vuex模块化 模块名前缀
    state:{
        test:666
    },
    getters:{
        
    },
    mutations:{
        testCommit(state,opt){
            
        }
    },
    actions:{
        testAction({commit,state,rootState,rootGetter}){
            
        }
    }
}

//***.vue
import {mapState,mapAction,mapMutation} from 'vuex'
//将vuex的方法注入到组件中，使用更方便
export default {
    computed:{
        ...mapState('moduleA',{
            test1:'test'
        }),
        ...mapState({//vuex的根状态
            test2:'test'
        })
    },
    method:{
        ...mapMutation('moduleA',{
            testCommit1:"testCommit"
        }),
        ...mapMutation({
            testCommit2:"testCommit"
        })
        ...mapAction('moduleA',{
            testAction1:"testAction"
        }),
        ...mapAction({
            testAction2:"testAction"
        })
    },
    mounted(){
        this.testCommit1();//===this.$store.commit('moduleA/testCommit')
        this.testCommit2();//===this.$store.commit('testCommit')
        this.testAction1();//===this.$store.dispatch('moduleA/testAction')
        this.testAction2();//===this.$store.dispatch('testAction')
    }
}

4. Компоненты

В этом абзаце говорится о компонентах «родитель-потомок».

Предполагая, что компонент custom-btn написан вручную, как родительский компонент прослушивает щелчок этого дочернего компонента. не разговариваю здесьslotохватывать

<!--parent.vue-->
<template>
    <custom-btn @click="some-fn"/>
</template>

<script>
import custom-btn from 'path/to/custom-btn.vue';
export default{
    components:{
        custom-btn
    }
}
</script>

<!--custom-btn.vue-->
<template>
    <button @click="$emit('click')"></button>
</template>

<script>
export default{
    name:'custom-btn'
}
</script>

только в подкомпонентахemitохватыватьclick, родительский компонент может отвечать толькоclick,этоclickВы можете настроить имя. Вы также можете передавать параметры при испускании, чтобы реализовать передачу значений между родительским и дочерним компонентами.

router-link — встроенный компонент, так как эммита нет, он не может реагировать на щелчок, но вы можете привязать щелчок к элементу dom в компоненте через @click.native.

Компонент кэша

Некоторые компоненты, включая маршрутизацию, необходимо кэшировать для нужд бизнеса. Например, при открытии компонента всплывающего окна уже есть проверенные параметры. Вам нужно временно закрыть всплывающее окно, но не хотите его открывать. снова для повторного рендеринга. В это время вам нужно использоватьkeep-alive

<template>
    <keep-alive>
        <custom-dialog></custom-dialog>
    </keep-alive>
</template>

В это время компонент не будет перерисовываться, и внутренние общие функции хука не будут выполняться.Для обработки кэшированной логики компонента используются только два выделенных хука.

<!--custom-dialog.vue -->
<script>
export default{
    activated(){
        //唤醒时
    },
    deactivated(){
        //睡眠时
    }
}
</script>

Это маленькая сцена, конечно, может быть и большая сцена, то есть если страница маршрута вся в кеше, то тут что-то есть, потому что рендеринг маршрута весь в кешеrouter-view, он же динамический, в этой позиции будет рендериться тот же уровень роутинга, здесь же будет динамически кэшироваться.

<template>
    <keep-alive :include="[]"><!-- 这个数组里写需要缓存路由的.vue文件的name -->
        <router-view />
    </keep-alive>
</template>

Пожалуйста, сохраните каждый файлnameТолько

5. API

Рекомендуется несколько раз почистить Vue.api, Многие люди пропустят эту страницу, когда будут смотреть официальную документацию.

6. Веб-пакет

упомянутый ранееrouterизbaseПосле того, как сервер развертывания может быть настроен, в случае некорневого каталога, веб-пакету также необходимо настроить корневой путь к ресурсам проекта.

//config/index.js
module.exports = {
    build:{
        assetsPublicPath:'some/dir/'，
        productionSourceMap：false
        //打包不生成map文件，有效减小打包体积，并且别人看不到你的源码
    }
}

Конфигурация Dev по умолчаниюlocalhost:8080, пригодный для использованияipПакет узла, предоставляющий коллегам доступ к проекту, который вы выполняете.

//config/index.js
const ip = require('ip').address();
//...
module.exports = {
    dev:{
        host: ip,
    }
}

Здесь также задействована конфигурация, которую можно выполнить через прокси.跨域, только для среды разработки, производственная среда может быть реализована через nginx и поиск сам по себе.

//config/index.js
module.exports = {
    proxyTable:{
        '/api':{//当有/api/...路径时，解析为下面的域名
            target: 'https://domain.com',//代理此域名
            changeOrigin: true,
            pathRewrite: { //当前解析为domain.com/api/...
              '^/api': '' //如有需求，可以将api/去掉,此处为domain.com/...
            }
      }
    }
}

расширение scss

Ищите сами на других языках, таких как меньше

Реализовано с помощью веб-пакета.vueОдин файл может получить доступ к глобальным переменным scss, необходимо установитьsass-resources-loaderМешок

//  build/utils.js  60行左右
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
    //...
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname,'../src/assets/theme/index.scss')
        //这里按照你的文件路径填写
        //这里可以理解为将此文件的变量广播全局,.vue文件可以使用这个文件中的变量
        //多个文件可以写成数组
        //详细文档可看 https://github.com/shakacode/sass-resources-loader
      }
    }),
    //...
}

Остальные конфигурационные файлы модифицировать не рекомендуется.Если вы хорошо владеете вебпаком, то можете играть свободно.

7. Часто используемые пакеты узлов

  1. @tweenjs/tween.jsБиблиотека анимации js
  2. axiosБиблиотека HTTP, поддерживающая Promise
  3. qsПлагин преобразования формата данных, используемый с axios
  4. crypto-jsВсе виды шифрования, без фактического эффекта безопасности
  5. prismjsПлагин подсветки синтаксиса
  6. vue-lazyloadЛенивая загрузка картинок, очень функциональна
  7. vue-metaДинамически изменять содержимое тега head в компоненте
  8. babel-plugin-equireecharts загружает плагины по запросу и оптимизирует метод записи.По умолчанию будет использоваться указанная версия echarts.Рекомендуется установить необходимое покрытие версий самостоятельно.
  9. webpack-bundle-analyzerПосле завершения упаковки отображается информация о томе, и вы можете узнать, загружается ли он повторно, какие файлы слишком велики и т. д.

8. Решение javascript out of memory появляется в dev/build

//package.json
"scripts": {
    "dev": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
    "build": "node --max_old_space_size=4096 build/build.js"
},

Советы: если вы знаете, как делиться, вы пойдете все дальше и дальше.

Категории