vue項目的開發

vue項目的開發

 咱們已經經過命令行建立了一個vue項目，而且打開了這個項目。下面是這個文件的src文件夾，這個文件夾放了整個項目的核心代碼。

1、vue文件的用處簡介。

　1.assets文件夾，用來存放圖片，文件等資源。直接這樣就能夠訪問到 src="./assets/logo.png"，最好的訪問方式 src="@/assets/logo.png" ， @能夠本身設置指向的文件夾，

　2.componets文件夾，主要是用來存放咱們的vue文件，之要路由能找到，怎麼寫都行。

　3.router文件夾，主要是用來存放路由，vue的頁面入口至於一個就是App.vue， 其餘全部的頁面都至關於App.vue的組件，路由的做用就是控制這些組建的替換，從直觀上感受就是頁面的跳轉，咱們也能夠這樣理解。下面會詳細介紹。

　4.App.vue，這個vue是整個項目的入口，在裏面寫的樣式是全局的樣式，路由渲染的組件會渲染到 router-view裏面。默認的 <img src=".assets.logo.png">要去掉，要否則每一個頁面都有。


　5.main.js主要用來存放組件，引用組件的配置文件，關於組件後面會詳細的介紹。

　6.處了src文件夾，config中index.js還配置了路徑端口值等。

 

　  2、新建vue頁面

　1.新建頁面

　咱們在components下面新建了一個index.vue頁面。點擊事件 @click="countNum"。 頁面賦值{{}} 。

<template>
  <div>
      這是一個首頁<br> 點了幾回按鈕{{count}}<br> <button @click="countNum">點我</button> </div> </template> <script> export default { data() { return { count: 0 } }, created(){ //這裏的js執行是在頁面尚未加載時候  }, mounted(){ //這裏的js執行是在頁面加載完成時候  }, methods: { countNum(){ //這裏是執行事件的方法 this.count += 1; } } } </script> <style scoped> /* scoped 屬性是讓css只在這個頁面執行 */ </style>

　以下圖頁面新建完成，咱們去寫路由跳轉。

2.路由跳轉

vueRouter 新添加的頁面在路由裏註冊才能跳轉。咱們找到註冊的時候path 就是咱們跳轉的地址。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import index from '@/components/index'  //新添加的頁面在路由裏註冊才能跳轉
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',             //這是頁面首頁
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index',        //index頁面就是 咱們新建的頁面
      name: 'index',
      component: index
    }
  ],
  mode: "history"  // 默認mode:hash 訪問連接http://localhost:8000/#/   咱們設置爲"history" 訪問連接http://localhost:8000/
})

這樣咱們就能訪問到這個頁面。路由這一塊應該沒有什麼問題。

 

　3、使用組件開發

　　咱們會經過組件寫一個頁面的首頁來介紹組件。

　　1.組件的安裝和引入。

　　經常使用的組件安裝，安裝組件在命令行打開，複製指令回車，就能夠安裝。

移動端經常使用組件：

Vant Weapp 安裝指令 :

npm i vant -S      //vue安裝

npm i vant-weapp -S --production   //微信小程序安裝

//在 main.js裏全局引入 

import Vant from 'vant'; 

import 'vant/lib/index.css'; 

Vue.use(Vant);

  Vux 安裝指令 :

npm install vux --save  

//在 main.js裏全局引入 

import Vue from 'vue'
 import { Actionsheet } from 'vux' Vue.component('actionsheet', Actionsheet)

pc端經常使用組件：

element ui 安裝指令 :

npm i element-ui -S

vue-baidu-map 安裝指令 :

$ npm install vue-baidu-map --save

咱們舉個例子，就很是容易理解。

這是vant 官方的輪播組件使用教程。main.js引入。頁面代碼演示，右側結果展現。

咱們先在main.js引入。咱們是全局引入。若是對vue熟悉後,建議vue組件模塊引入。

而後再在index.vue複製組件代碼，

十幾行代碼就引用成功了一個輪播圖。其餘的能夠去官網去看使用方法，https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/swipe

 

 

　　4、自定義組件開發

　　  咱們本身寫一個vue頁面，把這個頁面當組件。頁面使用組件而且傳遞參數。

　　  咱們新建一個導航欄頁面navigationBar.vue，這個頁面是每個頁面的頭部，不須要單獨顯示，全部不須要路由註冊。

 

 代碼以下：

<template>
    <div class="head-box">
      <img src="@/assets/return.png" mode="" class="return-icon" v-on:click="navigateBack"/>
      <div class="inline-block">
        首頁
      </div>
    </div>
</template>

<script> export default { data(){ return { } }, props:['type','id'], //接收調組件的頁面的傳參  mounted() { console.log(this.type) //打印參數 console.log(this.id) }, methods: { navigateBack(){ this.$router.go(-1); } } } </script> <style scoped> .head-box { line-height: 4rem; font-size: 1.1rem; text-align: center; /* padding-top: 1.6rem; */ background: linear-gradient(to right, rgba(255, 139, 26, 1), rgba(255, 104, 32, 1)); color: #FFFFFF; position: fixed; z-index: 2; width: 100%; top: 0; } .head-img { width: 1.8rem; height: 1.8rem; position: relative; float: left; top: 1.25rem; margin: 0 0.9rem; } .fr { float: right; } .inline-block { display: inline-block; } .return-icon { position: absolute; left: 0.625rem; height: 1.375rem; width: 1.375rem; margin-top: 1.25rem; } </style>

 組件頁面建好後咱們在index.vue使用這個組件並傳遞參數type和id。index.vue中的代碼：

<template>
  <div>
    <!-- 組件的調用傳參 -->
    <navigationBar type="1" :id="id"></navigationBar>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  </div>
</template>
<script>
  //找到這個組件
  import navigationBar from '../components/navigationBar.vue'

  export default { // 註冊這個組件  components: { navigationBar }, data() { return { id:'123456789', images: [ 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg' ] } } } </script> <style scoped> img { width: 60%; } .van-swipe { text-align: center; margin-top: 5rem; } </style>

在頁面裏運行一下。咱們看到了組件navigationBar.vue，和控制檯打印的index.vue傳的參數。

 

 　　組件開發就算入門了。若是須要了解更多隻能本身動手，認認真真去本身作一個項目。

 

　5、Vuex的使用

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。主要做用是在當前頁面給store的數據賦值，其餘頁面不刷新store的值就能自動變化。若是用不到不要引入。可是，若是您須要構建一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

　　簡單的說若是你須要在頁面的組件裏對一個數據賦值，而且須要在這個頁面不刷新就能顯示這個數據，緩存作不到。咱們就能夠用vuex來實現。vuex組件的使用仍是比較麻煩的，一步步來要有耐心。

　1.安裝組件

　命令行安裝組件 vuex 官網。

npm install vuex --save

 已經安裝成功。

　2.新建store文件

　vuex和router是一個級別的模塊。咱們在src下新建一個文件夾store，store文件加下加index.js文件。

 index裏代碼：

import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)


var store = new Vuex.Store({
  state : {
    age: '18',
    name:'liuzhou'
  },
  mutations : {

  }
})
export default store

store下面有兩個對象state和mutations。state下又有兩個數據：{ age: '18',  name:'liuzhou' } 。咱們成功會訪問它。

　3.在main.js裏註冊。

　　代碼以下：

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

//組件引入 vant
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Vue.config.productionTip = false

import store from './store'   //找到store
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,                     //引入store
  components: { App },
  template: '<App/>'
})

在main.js找到並引入store。這樣咱們就完成了vuex的安裝。

　4.在頁面的使用。

　咱們在index.vue裏訪問一下：

this.$store.state.age

  咱們在初始化的時候修改變量值並都打印了，看一下結果。

 

 數據的操做都沒有問題。

 

作到這裏基本上開發一個vue項目都沒問題了，遇到的問題均可以在網上找組件或者本身寫組件就好了。

原文地址：http://www.javashuo.com/article/p-dbwlathp-dx.html 

vue項目的建立文章 連接：http://www.javashuo.com/article/p-exiinlyb-dg.html