vue框架的搭建

使用VUE首先需要下載安裝一些列的環境。

 

第一步：

　　安裝Node.js

　　下載並安裝：node-v8.9.0-x64.msi

第二步：

　　安裝Vue腳手架：

　　cmd以管理員身份執行

　　npm install vue-cli -g 或者安裝淘寶版 cnpm install vue-cli -g

　　vue -V  查看是否安裝成功

第三步：

　　創建項目：

　　vue init webpack myProject  (項目名字)

　　提示內容：

　　

　　然后初始化：

　　vue init webpack myProject

　　

第四步：

　　切換到項目目錄下，安裝依賴包。

　　cd myProject

　　npm install   安裝

安裝之后 查看瀏覽器localhost:8080  是否有 welcome to You Vue.js App字樣。

有就代表環境配置以及項目創建成功了。

 

接下來准備敲代碼。。。。

 

稍等，講解一下Vue框架的邏輯。

 

Vue 單頁面應用。

一個項目，只能創建一個new Vue。

Vue能夠自動刷新。

 

vue項目創建成功之后，

測試npm run dev ，查看localhost 8080 能否查看，測試成功之后，

用pycharm打開項目目錄，

以下是各個目錄詳細：

項目目錄內，node_modules目錄一般是放依賴包，安裝的依賴包去這里查看是否安裝成功。

src一般放項目需要的程序以及組件等等。

 

Vue項目的一般邏輯是：

用戶直接訪問的是index.html

index.html下面是 App.vue 和 main.js  通過路由的方式(index.js)  連接組件components ，目錄中的組件，渲染具體內容。

所以編寫思路就是：

　　1  創建組件（Vue文件）

　　2  配置路由

　　3  編寫路徑 （router-link）

然后是代碼：

在src目錄下的components目錄下創建組件：

duanzi.vue

<template>
    <div class="hello">
        <h1>{{ temp }}</h1>   //渲染msg變量
        <h2>hey girl</h2>    
        <ul>
            <li v-for="item in arr">     //循環arr數組
            姓名：{{item.name}}
            性別：{{item.sex}}
            年齡：{{item.age}}
            </li>
        </ul>
        <div>
            <ul>
                <li>
                姓名：<input type="text" v-model="username">     //input框輸入信息
                </li>
                <li>
                年齡：<input type="text" v-model="userage">
                </li>
                <li>
                性別：<select v-model="usersex">                        //select下拉框
                                <option value="男" selected>男</option>
                                <option value="女" >女</option>
                                </select>
                </li>
            </ul>
         </div>
     <input type="button" value="增加" v-on:click="addStu">      //button 綁定事件  addStu函數
</div>

</template>

<script>
export default {
    name: 'duanzi',
    data () { 
        return {
            temp: '我是duanzi頁面',    //定義temp需要渲染的內容
            arr:[],                       //methods內的函數需要的變量需要現在data中定義，避免函數內是window對象。
            username:'',
            usersex:'男',
            userage:''
            }
        },
    mounted:function () {     //mounted函數指的頁面一渲染首先執行的函數。 這里首先執行showlist函數
        this.showList()
        },
    methods:{      //函數一般都寫在這里，可以寫多個函數。
    showList(){     //這里是寫死一個數組，data里的空列表實際就是為了這個數組而聲明一下，不然this指的是window對象，而不是data中的列表。
    this.arr = [{
        name:'tom',age:18,sex:'male'},
        {name:'jerry',age:19,sex:'male'}]
        },
    addStu(){            //綁定事件的函數，在arr數組中添加用戶在input框中輸入的內容。提交之后就能實時渲染到頁面了。
        this.arr.push({name:this.username,age:this.userage,sex:this.usersex})
    }}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>    //下面是一些默認的css樣式。
h1, h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    /*display: inline-block;*/
    margin: 0 10px;
    margin-bottom: 10px;
}
a {
    color: #42b983;
}
</style>

 

在創建另一個組件HelloWorld.vue：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>hey boy</h2>

    </div>

</template>

<script>
export default {
    name: 'HelloWorld',
    data () {
        return {
            msg: 'hello world'
            }
        },
    methods:{
        showme:function(){
        alert(this.msg)}
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
    font-weight: normal;
  }
    ul {
    list-style-type: none;
    padding: 0;
  }
    li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>

代碼道理和duanzi.vue一樣，只是輸出內容不一樣，實現兩個頁面。

 

之后在App.vue中配置具體渲染位置。

在index.js中配置路由。

 

<template>
    <div id="app">   //最外層div，這里的id很重要，這里的id和index.html是一致的，代表將渲染到的位置。
        <h1>澳門首家在線賭場</h1>   //這里寫的標簽在兩個組件的頁面都能顯示，類似django模板繼承效果。
        <router-link to="/"> helloworld</router-link> 
        //這里的router-link 就是將組件渲染到這里，實際是一個a標簽，to寫的是path路徑，和index.js中是一致的。
        <router-link to="/duanzi"> duanzi</router-link>
        <router-view/>  //這個router-view 是關鍵點，不能刪除。
    </div>
</template>

<script>
export default {
    name: 'app'    //這里也是寫那個id。
    }
</script>

<style>                  //下面是默認樣式
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

面是配置App.vue,下面開始配置index.js路由

import Vue from 'vue'     //這里的導入和python不太一樣需要注意。
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'  //導入兩個組件，@代表從根目錄下找。
import duanzi from '@/components/duanzi'

Vue.use(Router)

export default new Router({    
//路由除了創建項目的時候安裝，也可以單獨安裝
    routes: [
        {
            path: '/',    //路徑需要和App.vue中一致，不然找不到。/目錄建議默認一個，不然首頁會為空。
            name: 'HelloWorld',   //這個名字不是很重要，可寫可不寫，主要是區分組件功能。
            component: HelloWorld   //寫組件文件名字。
        },
        {
            path: '/duanzi',
            name: 'duanzi',
            component: duanzi
        }
     ]
})

如上就是路由的配置。

main.js代碼：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
Vue.config.productionTip = false
Vue.prototype.axios=axios
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

index.html代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>myvue</title>
    </head>
<body>
    <div id="app"></div>
    <h2>我是index.html</h2>  //這里我寫了個h2標簽，區分一下效果。


    <!-- built files will be auto injected -->
    </body>
</html>

寫完代碼，我們可以通過npm start  （npm run dev也可以）在cmd中啟動Vue項目，然后通過 http://localhost:8080  訪問內容。

以下為實現效果：

另一個頁面：

 

 

 

完結撒花✿✿ヽ(°▽°)ノ✿