前端 高級 （二十五）vue2.0項目實戰一 配置簡要說明、代碼簡要說明、Import/Export、輪播和列表例子

1、啓動服務自動打開瀏覽器運行

2、配置簡要說明

一、node_modules

　　安裝好的依賴文件,中間件等，所在位置

 

二、package.jason

 　　配置當前項目要安裝的中間件和依賴文件

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",//項目的啓動方式
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"//項目如何打包
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {//當前項目要安裝的依賴文件，後邊是版本
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

 　　node_modules文件夾下的文件就是這裏定義須要安裝的依賴文件或中間件等。

三、build文件夾

　　webpack的一些配置文件

　　main.js入口文件定義

　　webpack.base.conf.js中定義

四、config

　　項目核心配置

五、src

六、static

　　靜態文件資源也能夠放這裏

七、test

　　測試相關

webpack打包後，會成爲常規的html,js,css，再放到服務裏執行，不會把這些源文件放到服務器執行。對這麼多類別文件該解析的解析，該處理的處理，該丟棄的丟棄。

3、模塊化 代碼說明

　　

　　模塊化：把一個較大的項目拆分紅不少小的互相有依賴的部分，主要有兩個命令 import 輸入其餘模塊， export 對外輸出接口,如

入口main.js裏邊的代碼

      

　　  導入的中間件或依賴文件，在node_modules文件夾下

　　  ./當前目錄

　　 阻止vue在啓動時候生產生產提示

 入口組件App.vue

 

路由 index.js

 加載的組件HelloWorld.vue

4、Import/Export 

一、導出一個export default 導出一個組件

testB.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {--只導出一個
  name: 'testB',
  data () {
    return {
      msg: 'testbbbb'
    }
  }
}
</script>

export default 只能夠導出一個

APP.vue導入使用：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <testA/><!--三、模板裏使用-->
  </div>
</template>

<script> import testA from './components/testA';--一、導入testA和export的name保持一致
export default {
  name: 'App',
  data(){
    return {
     a:'a'
    }
  },
  components:{
    testA --二、引用組件
  }
}
</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>

二、導出多個

var name='sonia';
var age = 18;
var msg = 'hello';
export {name,age,msg};--導出多個

 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    {{name}}--三、使用 </div>
</template>
<script>
import {name,age,msg} from './components/testA';--一、導入須要一個{}
export default {
  name: 'App',
  data(){
    return {
      name:name--二、要使用先要放到data中
    }
  }
}
</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>

三、將多個導出一個對象

export default {
     name:'12345',
     age:20
}

<template>
  <div id="app">
    <img src="./assets/logo.png">
    {{name.age}}--對象的使用方法
  </div>
</template>
<script>
import abc from './components/testA';--一個abc是個對象,就是export default只是是一個對象
export default {
  name: 'App',
  data(){
    return {
      name:abc--放到一個屬性上
    }
  }
}
</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>

四、導出函數

function num(x,y) {
     alert(x+y);
 };
export {num};

<template>
  <div id="app">
    <img src="./assets/logo.png">
    {{num(1,2)}}--三、函數調用 </div>
</template>
<script>
import {num} from './components/testA';--一、導入函數，須要{}，由於導出就是以多個的方式導出
export default {
  name: 'App',
  data(){
    return {
      num:num--二、附加到data
    }
  }
}
</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 包含TestA.vue，其又包含TestB.vue

TestB.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'testB',
  data () {
    return {
      msg: 'testbbbb'
    }
  }
}
</script>

TestA.vue

<template>
  <div>
    <testB/> --使用組件testB
  </div>
</template>

<script>
import testB from './testB';--導入組件testB
export default {
  name: 'testA',
  data () {
    return {
      msg: 'testAAAA'
    }
  },
  components:{
    testB--引用組件testB
  }
}
</script>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <testA/>--使用組件A
  </div>
</template>
<script>
import testA from './components/testA';--導入組件testA
export default {
  name: 'App',
  data(){
    return {
      a:"a"
    }
  },
  components:{
    testA--引用組件testA
  }
}
</script>

 5、輪播腳手架寫法例子

分兩個組件banner.vue,list.vue，一個輪播組件，一個列表組件

banner.vue

<template>
  <div class="banner">
        <img v-for="(img,index) in imges" :src="img" v-show="index==num"/>
        <div class="banner-circle">
            <ul>
                <li v-for="(img,index) in imges" :class="{'selected':index==num}"></li> 
            </ul> 
        </div>
    </div>
</template>

<script>
export default {
  //name: 'testB',
  data () {
    return {
        num:0,
        imges:[require('../assets/img/banner1.jpg'),--本地圖片要導入須要用require要不webpack不認識
            require('../assets/img/banner2.jpg'),
            require('../assets/img/banner3.jpg'),
            require('../assets/img/banner4.jpg'),
            require('../assets/img/banner5.jpg')],
    }
  },
    mounted:function(){   //生命週期  掛載完成
        this.play();
    },
    methods:{   //方法
        autoPlay:function(){
            this.num++;
            if(this.num == this.imges.length){
                this.num = 0;
            }
        },
        play:function(){
            setInterval(this.autoPlay,2000);
        }
        
    }
}
</script>
<style>
*{
    margin:0;
    padding:0;
}
ul {
    list-style-type:none;
}
body {
    font-size: 14px;
    background: #fff;
    overflow-y:scroll;
    overflow-x:hidden;
}
html,body {
    max-width:720px;
    height:100%;
    margin:0 auto;
}
/*index*/
.banner {
    position: relative;
}
.banner .banner-circle {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    color: #fff;
}
.banner .banner-circle li{
    display:inline-block;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    padding:5px;
    margin:2px;
}
.banner .banner-circle ul {
    text-align: center;
}
.banner .banner-circle .selected {
    background: rgba(0,0,0,.8);
}
.banner img {
    width: 100%;
    margin: 0;
    padding: 0;
}
</style>

list.vue

<template>
  <div class="index-category">
        <div class="category" v-for="list in lists"><i class="iconfont" v-bind:class="list.icon"></i><label>{{list.title}}</label></div>
  </div>
</template>

<script>
export default {
  //name: 'testB',
  data () {
    return {
      lists:[{title:'在線諮詢',icon:'icon-shenghuo'},
                {title:'在線諮詢',icon:'icon-jiaoyu'},
                {title:'在線諮詢',icon:'icon-11'},
                {title:'在線諮詢',icon:'icon-jiazheng'},
                {title:'在線諮詢',icon:'icon-shenghuo'},
                {title:'在線諮詢',icon:'icon-shenghuo'}]
    }
  }
}
</script>
<style>
/*index-category*/
.index-category {
    margin-top: 5%;
}
.index-category .category {
    width: 50%;
    float:left;
    text-align:center;
}
.index-category .category .iconfont {
    font-size: 40px;
    display:inline-block;
    padding: 10%;
    border-radius: 50%;
    color:#fff;
    border: 3px solid #f9f9f9;
    box-shadow: 0px 0px 6px rgba(0,0,0,.5);
}
.index-category .category:nth-child(1) .iconfont{
    background: #f95730;
}
.index-category .category:nth-child(2)  .iconfont{
    background: #fa69b9;
}
.index-category .category:nth-child(3)  .iconfont{
    background: #49dacf;
}
.index-category .category:nth-child(4)  .iconfont{
    background: #908cfd;
}
.index-category .category:nth-child(5)  .iconfont{
    background: #92d85c;
}
.index-category .category:nth-child(6)  .iconfont{
    background: #ecbe35;
}
.index-content .index-category .category label {
    display: block;
    padding: 10% 0;
    color: #999;
}
/*index-category end*/

</style>

APP.vue使用上邊兩個組件

<template>
  <div id="app">
    <banner/>--使用兩個組件
    <list/>
  </div>
</template>
<script>
import banner from './components/banner';--導入兩個組件
import list from './components/list';
export default {
  name: 'App',
  data(){
    return {
    }
  },
  components:{
    banner,--引用兩個組件
    list
  }
}
</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>