nodejs+webpack+vue之vue

時間 2019-11-11

標籤 nodejs+webpack+vue nodejs webpack vue 简体版

原文原文鏈接

vue.js 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。vue-cli是vue官方提供的一個命令行工具，vue-cli主要是用於構建單頁應用的腳手架。css

使用方法：html

一、安裝vue-cli：npm install -g vue-clivue

二、安裝webpack-simple模板：vue init webpack-simple 項目名稱，如: vue init webpack-simple demonode

三、安裝項目依賴：npm installwebpack

四、執行代碼：執行webpack命令，在dist目錄下生成build.js文件，執行npm run dev命令，自動啓動web服務127.0.0.1:8080web

本項目則是基於vue-cli生成的單頁應用進行改形成多頁面模板。vue-router

本項目用到了兩個html模板頁：index.html、users.html，所以，在webpack.config.js文件裏entry節點則有兩個入口文件/src/index.js、/src/user.js。vue-cli

index.html模板，<router-view>把路由匹配到的組件渲染在這裏npm

<body>
    <div id="app">
　　　　　<!-- 路由匹配到的組件將渲染在這裏 -->
        <router-view></router-view>
    </div>
    <script src="/dist/build.index.js"></script>
</body>

index.js入口文件，引入了logon.vue組件，在'/'目錄下默認引入該組件。app

import Vue from 'vue'
import VueResource  from 'vue-resource'
import VueRouter  from 'vue-router'
import Login from './components/login.vue'
require('./scss/reset.scss')
require('./scss/layout.scss')

Vue.use(VueResource)
Vue.use(VueRouter)

const router= new VueRouter({    
    routes:[
        {path:'/',component:Login}
    ]
});

new Vue({
    router,
    el:'#app'
});

users.html模板，使用 router-link 組件來導航，經過傳入 `to` 屬性指定連接，<router-link> 默認會被渲染成一個 `<a>` 標籤，<router-view>，<router-view>把路由匹配到的組件渲染在這裏

<body>
<div id="app">
    <ul id="nav" class="clearfix">    
        <li><router-link to="/index">首頁</router-link></li>    
        <li><router-link to="/userList">報名人員</router-link></li>
    </ul>        
    <div id="banner"></div>      
    <router-view></router-view>
</div>
<script src="/dist/build.index.js"></script>
</body>

user.js入口文件，引入了index.vue和userList.vue兩個組件，在'/'及'/index'目錄下默認引入index.vue組件，在'/userList'目錄下默認引入userList.vue組件。

import Vue from 'vue'
import VueResource  from 'vue-resource'
import VueRouter  from 'vue-router'
import Index from './components/index.vue'
import UserList from './components/userList.vue'
require('./scss/reset.scss')
require('./scss/user.scss')

Vue.use(VueResource)
Vue.use(VueRouter)

const router= new VueRouter({    
    routes:[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/userList',component:UserList}
    ]
});

new Vue({
    router,
    el:'#app'
});

每一個組件下都有各自的js頁面效果及數據請求，如：login.vue

<template>
  <div class="login-box">
    <div>
      <p>
        <input type="text" placeholder="手機號" v-model.trim="phone"/>
        <input type="text" placeholder="驗證碼" v-model="code" readonly="readonly"/>      
      </p>
      <input type="button" value="發送驗證碼" @click="getCode"/>
    </div>
    <button id="login-btn" @click="loginUser">登 錄</button>        
  </div>
</template>

<script>
import {hex_md5} from '../util/md5'
import httpHelper from "../util/httpHelper"
import {setTelPhone} from '../util/cacheManger'

export default {  
  data () {
    return {
      phone: '15365655565',
      code:''     
    }
  },
  methods:{
    getCode(){
      let _self = this;
      let tel = /^[0-9]{11}$/.test(_self.phone)
      if(!tel){
        _self.phone = '手機號不正確';       
        return;
      }
      if(_self.phone){
        let params = {num:_self.phone}        
        httpHelper.get(_self,"getVeryCode",params,(data)=>{
          if(data.body.code<0){
            alert(data.body.description);
            return;            
          }
          _self.code = data.body.data;                                    
        },(err)=>{
            alert("shi bai")
        })
      }      
    },
    loginUser(){
      let _self = this;
      if(_self.phone && _self.code){  
          setTelPhone(_self.phone);        
          window.location.href = '/users.html'; 
      }
    }
  }
}
</script>

上一篇：nodejs+webpack+vue之node

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。