Vue 框架搭建

時間 2019-12-05

標籤 vue 框架搭建简体版

原文原文鏈接

vue框架的搭建
使用VUE首先須要下載安裝一些列的環境。css

第一步：html

　　安裝Node.jsvue

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

第二步：python

　　安裝Vue腳手架：webpack

　　cmd以管理員身份執行ios

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

　　vue -V 查看是否安裝成功vue-router

第三步：vue-cli

　　建立項目：

　　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

複製代碼
 1 <template>
 2     <div class="hello">
 3         <h1>{{ temp }}</h1>   //渲染msg變量
 4         <h2>hey girl</h2>    
 5         <ul>
 6             <li v-for="item in arr">     //循環arr數組
 7             姓名：{{item.name}}
 8             性別：{{item.sex}}
 9             年齡：{{item.age}}
10             </li>
11         </ul>
12         <div>
13             <ul>
14                 <li>
15                 姓名：<input type="text" v-model="username">     //input框輸入信息
16                 </li>
17                 <li>
18                 年齡：<input type="text" v-model="userage">
19                 </li>
20                 <li>
21                 性別：<select v-model="usersex">                        //select下拉框
22                                 <option value="男" selected>男</option>
23                                 <option value="女" >女</option>
24                                 </select>
25                 </li>
26             </ul>
27          </div>
28      <input type="button" value="增長" v-on:click="addStu">      //button 綁定事件  addStu函數
29 </div>
30 
31 </template>
32 
33 <script>
34 export default {
35     name: 'duanzi',
36     data () { 
37         return {
38             temp: '我是duanzi頁面',    //定義temp須要渲染的內容
39             arr:[],                       //methods內的函數須要的變量須要如今data中定義，避免函數內是window對象。
40             username:'',
41             usersex:'男',
42             userage:''
43             }
44         },
45     mounted:function () {     //mounted函數指的頁面一渲染首先執行的函數。 這裏首先執行showlist函數
46         this.showList()
47         },
48     methods:{      //函數通常都寫在這裏，能夠寫多個函數。
49     showList(){     //這裏是寫死一個數組，data裏的空列表實際就是爲了這個數組而聲明一下，否則this指的是window對象，而不是data中的列表。
50     this.arr = [{
51         name:'tom',age:18,sex:'male'},
52         {name:'jerry',age:19,sex:'male'}]
53         },
54     addStu(){            //綁定事件的函數，在arr數組中添加用戶在input框中輸入的內容。提交以後就能實時渲染到頁面了。
55         this.arr.push({name:this.username,age:this.userage,sex:this.usersex})
56     }}
57     }
58 </script>
59 
60 <!-- Add "scoped" attribute to limit CSS to this component only -->
61 <style scoped>    //下面是一些默認的css樣式。
62 h1, h2 {
63     font-weight: normal;
64 }
65 ul {
66     list-style-type: none;
67     padding: 0;
68 }
69 li {
70     /*display: inline-block;*/
71     margin: 0 10px;
72     margin-bottom: 10px;
73 }
74 a {
75     color: #42b983;
76 }
77 </style>

在建立另外一個組件HelloWorld.vue：

複製代碼
<template>
 2     <div class="hello">
 3         <h1>{{ msg }}</h1>
 4         <h2>hey boy</h2>
 5 
 6     </div>
 7 
 8 </template>
 9 
10 <script>
11 export default {
12     name: 'HelloWorld',
13     data () {
14         return {
15             msg: 'hello world'
16             }
17         },
18     methods:{
19         showme:function(){
20         alert(this.msg)}
21         }
22     }
23 </script>
24 
25 <!-- Add "scoped" attribute to limit CSS to this component only -->
26 <style scoped>
27     h1, h2 {
28     font-weight: normal;
29   }
30     ul {
31     list-style-type: none;
32     padding: 0;
33   }
34     li {
35     display: inline-block;
36     margin: 0 10px;
37 }
38 a {
39     color: #42b983;
40 }
41 </style>

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

以後在App.vue中配置具體渲染位置。
在index.js中配置路由。

<template>
 2     <div id="app">   //最外層div，這裏的id很重要，這裏的id和index.html是一致的，表明將渲染到的位置。
 3         <h1>澳門首家在線賭場</h1>   //這裏寫的標籤在兩個組件的頁面都能顯示，相似django模板繼承效果。
 4         <router-link to="/"> helloworld</router-link> 
 5         //這裏的router-link 就是將組件渲染到這裏，實際是一個a標籤，to寫的是path路徑，和index.js中是一致的。
 6         <router-link to="/duanzi"> duanzi</router-link>
 7         <router-view/>  //這個router-view 是關鍵點，不能刪除。
 8     </div>
 9 </template>
10 
11 <script>
12 export default {
13     name: 'app'    //這裏也是寫那個id。
14     }
15 </script>
16 
17 <style>                  //下面是默認樣式
18 #app {
19 font-family: 'Avenir', Helvetica, Arial, sans-serif;
20 -webkit-font-smoothing: antialiased;
21 -moz-osx-font-smoothing: grayscale;
22 text-align: center;
23 color: #2c3e50;
24 margin-top: 60px;
25 }
26 </style>

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

1 import Vue from 'vue'     //這裏的導入和python不太同樣須要注意。
 2 import Router from 'vue-router'
 3 import HelloWorld from '@/components/HelloWorld'  //導入兩個組件，@表明從根目錄下找。
 4 import duanzi from '@/components/duanzi'
 5 
 6 Vue.use(Router)
 7 
 8 export default new Router({    
 9 //路由除了建立項目的時候安裝，也能夠單獨安裝
10     routes: [
11         {
12             path: '/',    //路徑須要和App.vue中一致，否則找不到。/目錄建議默認一個，否則首頁會爲空。
13             name: 'HelloWorld',   //這個名字不是很重要，可寫可不寫，主要是區分組件功能。
14             component: HelloWorld   //寫組件文件名字。
15         },
16         {
17             path: '/duanzi',
18             name: 'duanzi',
19             component: duanzi
20         }
21      ]
22 })

如上就是路由的配置。

main.js代碼：

1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import axios from "axios"
 5 Vue.config.productionTip = false
 6 Vue.prototype.axios=axios
 7 /* eslint-disable no-new */
 8 new Vue({
 9     el: '#app',
10     router,
11     template: '<App/>',
12     components: { App }
13 })

index.html代碼：

<!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="utf-8">
5         <meta name="viewport" content="width=device-width,initial-scale=1.0">
6         <title>myvue</title>
7     </head>
8 <body>
9     <div id="app"></div>
10     <h2>我是index.html</h2>  //這裏我寫了個h2標籤，區分一下效果。
11 
12 
13     <!-- built files will be auto injected -->
14     </body>
15 </html>

寫完代碼，咱們能夠經過npm start （npm run dev也能夠）在cmd中啓動Vue項目，而後經過http://localhost:8080 訪問內容。
如下爲實現效果：

另外一個頁面：