vue項目內文件的使用和配置

時間  2019-12-19
標籤 vue 項目 文件 使用 配置 简体版
原文   原文鏈接

目錄javascript

項目的過程

  1. vue項目的請求生命週期：main.js完成環境的加載與根組件的渲染；router的index.js完成路由映射
  2. 項目啓動：加載main.js：index.html、new Vue()、Vue、router、store、完成App.vue的掛載
  3. 請求：請求路徑 => router路由 => 頁面組件(小組件) => 替換<router-view />完成頁面渲染 => <router-link>（this.$router.push()）完成請求路徑的切換

vue內的文件

public下面的index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--  適配移動端   疏放程度是1倍-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--  圖標-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--  標題，這個能夠本身進行修改-->
<!--    <title>b-proj</title>-->
    <title>vue項目</title>

</head>
<body>
<!--當瀏覽器不支持js 的時候，會打印下面的這段話-->
<!--如今都支持,因此能夠不須要-->
<noscript>
    <strong>We're sorry but b-proj doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
</noscript>
<!--下面的掛採點-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

修改後css

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue項目</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

app.vue

style中寫入的全局配置，這個能夠進行刪除html

<style>
  /*全局配置*/
#app {
  /*瀏覽器配置*/
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

app.vue修改後保留前端

<script src="main.js"></script>
<template>
    <div id="app">
        <!--提供一個視圖組件佔位符，佔位符被哪一個views下的視圖組件替換，瀏覽器就顯示哪一個頁面組件-->
        <router-view/>
    </div>
</template>

main.js

1.入口文件：加載vue、router、store等配置 以及 加載自定義配置(本身的js、css，第三方的js、css)
2.建立項目惟一根組件，渲染App.vue，掛載到index.html中的掛載點 => 項目頁面顯示的就是 App.vue 組件
3.在App.vue中設置頁面組件佔位符
4.瀏覽器帶着指定 url連接 訪問vue項目服務器，router組件就會根據 請求路徑 匹配 映射組件，去替換App.vue中設置頁面組件佔位符
eg: 請求路徑 /user => 要渲染的組件 User.vue => 替換App.vue中的 <router-view/>vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

修改後java

import Vue from 'vue'  // 加載vue環境
import App from './App.vue'  // 導入根組件
import router from './router'  // 加載路由環境 vue-router
import store from './store'  // 加載倉庫環境 vuex

Vue.config.productionTip = false;  // Tip提示
new Vue({
    el: '#app',//掛載點
    router: router,//路由
    store,
    render: function (read_root_vue) {//read_root_vue任意的一個函數,和h相同
        return read_root_vue(App)
    }
});

store下的index.js

前端的瀏覽器存儲

  1. cookie:能夠設置過時時間
  2. sessionStore:關閉瀏覽器消失
  3. localStore:永久存儲
  4. store創庫：刷新消失

store

store是全局的單列webpack

  1. 在任何一個組件邏輯中：this.$store.state.car 訪問或是修改
  2. 在任何一個組件模板中：$store.state.car 訪問或是修改
  3. 頁面從新加載，數據就重置（面向移動端開發）

存儲web

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
export default new Vuex.Store({
//在store廠庫的內部，通常在state內寫要存入的數據
    state: {
        //car: {
            //name: '默認',
            //price: 0
        //}
    },
    mutations: {},
    actions: {},
    modules: {}
})

存儲vue-router

//this表明的是vue對象
//this.$store.state.car = car;


export default {
        name: "Car",
        props: ['car'],
        methods: {
            goDetail(car) {
                // 先將要顯示的汽車對象存儲到倉庫，詳情頁加載後，本身去倉庫中獲取
                // console.log(this.$store.state);
                this.$store.state.car = car;
                this.$router.push('/car/detail')
            }
        }
    }

取出,通常使用，建立的時候createvuex

//this.car = this.$store.state.car;


    export default {
        name: "CarDetail",
        data() {
            return {
                car: {}
            }
        },
        created() {
            // console.log(this.$store.state.car);
            // this.car = {name: '五菱宏光', price: 120}
            this.car = this.$store.state.car;
        }
    }

組件的使用規則

  1. .vue文件就是一個組件：html、css、js
  2. html由template標籤提供：有且只有一個根標籤
  3. css由style標籤管理：style標籤添加scope屬性，保證樣式只在該組件內部起做用(樣式組件化)
  4. js由script標籤管理：內部書寫的就是組件{}語法，可是必定要導出 export default

導出：

export default {
        name: 'home',
        components: {
        },
        data() {
            return {
            }
        }
    }

導入：

import Home from '../views/Home.vue

註冊

export default {
        name: 'home',
        // 二、註冊要使用的小組件
        components: {
            Nav,
            Footer,
            Book,
        },
        data() {
            return {
                books
            }
        }
    }

使用

在<template></template>內部使用

<template>
    <div class="home">
        <!--vue項目環境下，模板也受vue環境控制，使用標籤支持大小寫-->
        <!--三、使用導入的小組件-->
        <Nav></Nav>

        <div class="main">
            <!-- key屬性是爲標籤創建緩存的標識，不能重複，且在循環組件下，必須設置 -->
            <Book v-for="book in books" :book="book" :key="book.title" />
        </div>

        <Footer></Footer>
    </div>
    
</template>

在components文件夾下的組件路由跳轉的方式

  1. router-link會別解析爲a標籤，可是不能直接寫a，由於a跳轉回刷新頁面

方式1

<router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>

方式2

<router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link>

方式3

this.$router.push(`/book/detail/${id}`);

方式4

this.$router.push({
    name: 'book-detail',
    params: {pk: id},
});

方式5

this.$router.go(-1)//向後跳轉1頁
this.$router.go(-2)//向後跳轉2頁
this.$router.go(1)//向前跳轉1頁
this.$router.go(2)//向前跳轉2頁

在roter下的index.js路由配置的方式

  1. 路由規則表：註冊頁面組件，與url路徑造成映射關係
  2. 首先都須要將所須要的組件導入到本文件夾下，如：import Home from '../views/Home.vue'

方式1：默認連接

{
        path: '/',
        name: 'home',
        component: Home
    },

方式2：重定向

{
        path: '/index',
        redirect: '/'
    },

方式3：新連接

{
        path: '/user',
        name: 'user',
        component: User
    },

方式4：有名分組

{
        path: '/book/detail/:pk',
        name: 'book-detail',
        component: BookDetail
    },

方式5：另一種連接

另一種導入方式

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')等同於component: () => import( '../views/About.vue')等同於import About from '../views/About.vue

{
    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.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

src文件下靜態資源如何加載

  1. 當組件本身使用的時候，靜態資源的加載可使用相對路徑'../assets/img/西遊記.jpg'
  2. 前臺本身提供的靜態資源，在傳輸後再使用(組件間交互)，要纔有require函數來加載資源let img1 = require('../assets/img/西遊記.jpg');就是require(資源的相對路徑)

vue的配置問題

配置全局css樣式

//import '@/assets/css/global.css' 方法1
require('@/assets/css/global.css');

配置全局settings.js

import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;//原生的配置，在調用的時候能夠方便使用
//settings.js
//導出
export default {
    base_url: 'http://localhost:8000',
}

使用

this.$settings.base_url

Vue之v-for循環中key屬性注意事項

當Vue用 v-for 正在更新已渲染過的元素列表是，它默認用「就地複用」策略。若是數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的改變，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。

爲了給Vue一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。key屬性的類型只能爲 string或者number類型。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程