基於Vue的WebApp項目開發（二）

時間  2019-12-02
標籤 基於 vue webapp 項目 開發 欄目 無線 简体版
原文   原文鏈接

利用webpack解析和打包.vue組件頁面css

相關知識：html

vue項目中的每一個頁面其實都是一個.vue的文件，這種文件，Vue稱之爲組件頁面，必須藉助於webpack的vue-loader才能運行，因此必須安裝相關的包。前端

【注意】vue

從webpack2.0開始，在webpack.config.js中添加babel:{}是不認識的，須要在項目根目錄下新建.babelrc文件，內容填寫以下：node

{
  presets:['es2015'],
  //這句代碼就是爲了解決打包.vue文件不報錯
  plugins:['transform-runtime']
}
View Code

 

好了，接下來看讓一個Vue項目跑起來所須要的步驟：webpack

步驟一：須要安裝如下幾個包git

vue：vue.js核心包es6

vue-loader：.vue文件編譯loadergithub

vue-template-compiler：.vue模板編譯，被vue-loader所依賴web

babel-plugin-transform-runtime：es6實時轉換成es5語法

安裝vue相關的依賴包（--save-dev意思是將包安裝到開發環境下）

 

接着安裝vue核心包（--save意思將包安裝到運行環境下）

最終package.json文件內容

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.6.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "vue": "^2.5.13"
  }
}
View Code

步驟二：配置webpack.config.js文件

var htmlwp = require('html-webpack-plugin');

module.exports = {
  //指定打包的入口文件
  entry: './src/main.js',
  output: {
    //指定輸出路徑
    path: __dirname + '/dist',
    //指定輸出文件名
    filename: 'build.js'
  },
  module: {
    loaders: [{
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        //url可能請求多個資源，因此未來在項目中經過url導入的資源都配置在這裏
        test: /\.(png|jpg|gif|ttf)$/,
        loader: 'url-loader?limit=400000'
      },
      {
        //將當前項目中全部的.js文件都要進行es6轉es操做
        test: /\.js$/,
        loader: 'babel-loader?presets[]=es2015',
        //node_modules中的全部.js文件不去轉換，提升打包性能
        exclude: /node_modules/
      },
      {
        //解析.vue組件頁面的文件
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new htmlwp({
      title: '首頁',
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}
View Code

步驟三：刪除src文件夾中的calc.js文件，修改main.js文件，修改index.html文件，在src文件夾中增長App.vue文件

main.js

// 1.0導入vue核心包
import Vue from 'vue';

//2.0 導入App.vue的vue對象
import App from './App.vue';

// 3.0利用Vue對象進行解析渲染
new Vue({
    el:'#app',
    //render:function(create){create(App)} //es5的寫法
    render:c=>c(App)  //es6寫法
})
View Code 
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
View Code 
App.vue

<!--之後項目的根組件-->
<template>
  <!--1.0 template主要是存放html元素（頁面結構）-->
  <span>{{msg}}</span>
</template>

<script>
  // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象
  // 因此Vue中該定義的元素均可以使用
  export default {
    data() { //等價於es5的data:function(){}
      return {
        msg: 'hello vue'
      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style scoped>
  /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面
      寫的CSS代碼知識在當前組件頁面上有效，不會影響到其餘組件頁面
     * */
</style>
View Code

 此時項目結構爲：

 步驟四：命令行運行npm run dev

 

項目中使用的ECMAScript6語法總結

一、對象的寫法

es5中對象：{add:add,substrict:substrict}

es6中對象：{add,substrict}  注意這種寫法的屬性名稱和值變量是同一個名稱才能夠簡寫

App.vue

<!--之後項目的根組件-->
<template>
  <div>
    <!--1.0 template主要是存放html元素（頁面結構）-->
    <span>{{msg}}</span>
    <button @click="add(3,1)">add</button>
  </div>
</template>

<script>
  // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象
  // 因此Vue中該定義的元素均可以使用
  function add(x, y) {
    console.log(x + y)
  }
  export default {
    data() {
      return {
        msg: 'hello vue'
      }
    },
    methods: {
      //add:add  //es5寫法
      add //es6寫法
    },
    created() {

    }
  }
</script>

<style scoped>
  /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面
      寫的CSS代碼知識在當前組件頁面上有效，不會影響到其餘組件頁面
     * */
  }
</style>
View Code

二、在對象中方法的寫法

es5：{add:function(){},substrict:function(){} }

es6：{add:(){},substrict(){} }

<!--之後項目的根組件-->
<template>
  <div>
    <!--1.0 template主要是存放html元素（頁面結構）-->
    <span>{{msg}}</span>
    <button @click="add(3,1)">add</button>
  </div>
</template>

<script>
  function add(x, y) {
    console.log(x + y)
  }
  export default {
    data() { //等價於es5的data:function(){}
      return {
        msg: 'hello vue'
      }
    },
    methods: {
      //add:add  //es5寫法
      add //es6寫法
    },
    created() {

    }
  }
</script>

<style>

</style>
View Code

三、對象的導出寫法

es5：module.exports = function(){};或者exprots.add = function(){};

es6：export default{ add(){} };或者export function add(){}

<!--之後項目的根組件-->
<template>
  <div>
    <!--1.0 template主要是存放html元素（頁面結構）-->
    <span>{{msg}}</span>
    <button @click="add(3,1)">add</button>
  </div>
</template>

<script>
  function add(x, y) {
    console.log(x + y)
  }
  //module.exports = { //es5導出對象的寫法
  export default { //es6導出對象的寫法
    data() { //等價於es5的data:function(){}
      return {
        msg: 'hello vue'
      }
    },
    methods: {
      //add:add  //es5寫法
      add //es6寫法
    },
    created() {

    }
  }
</script>

<style>

</style>
View Code

四、對象的導入

es5：var add = require('./calc.js');

es6：若是導出的是export default { add(){} }，那麼能夠經過import obj from './calc.js'

        若是導出的是export function add(){};export const PI = 3.15，那麼能夠經過按需加載import { add,PI } from './calc.js' 

calc.js

function add(x, y) {
  console.log(x + y);
}

function substrict() {
  console.log(x - y);
}

export default {
  add,
  substrict
}
View Code 
App.vue

<!--之後項目的根組件-->
<template>
  <div>
    <!--1.0 template主要是存放html元素（頁面結構）-->
    <span>{{msg}}</span>
    <button @click="newadd(3,1)">add</button>
  </div>
</template>

<script>
  import calc from './calc.js';
  export default { //es6導出對象的寫法
    data() { //等價於es5的data:function(){}
      return {
        msg: 'hello vue'
      }
    },
    methods: {
      //add:add  //es5寫法
      add, //es6寫法
      newadd:calc.add,
      substrict:calc.substrict
    },
    created() {

    }
  }
</script>

<style>

</style>
View Code

 

使用路由（vue-router）實現單頁面應用（SPA）開發

單頁面應用，即在一個頁面集成系統中全部功能，整個應用只有一個頁面。由於路由的控制在前端，單頁面應用在頁面切換時比傳統頁面更快，從而在前端體驗更好。下面請看SPA應用開發的基礎過程。

步驟一：安裝vue-router

步驟二：增長login.vue、register.vue和修改App.vue

login.vue

<template>
  <div>
    <h3>登陸組件</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>
View Code 
register.vue

<template>
  <div>
    <h3>註冊組件</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>
View Code 
App.vue

<!--之後項目的根組件-->
<template>
  <div>
    <router-link to="/login">登陸</router-link>
    <router-link to="/register">註冊</router-link>
    <!--路由佔位符-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default { 
    data() { 
      return {

      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style>

</style>
View Code

步驟三：配置入口文件

main.js

// 1.0導入vue核心包
import Vue from 'vue';

//2.0 導入App.vue的vue對象
import App from './App.vue';

//3.0 導入vue-router
import vueRouter from 'vue-router';

//3.0.1將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//3.0.2導入路由規則對應的組件對象
import login from './components/account/login.vue';
import register from './components/account/register.vue';

//3.0.3定義路由規則
var router1 = new vueRouter({
    routes:[
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
});

// 4.0利用Vue對象進行解析渲染
new Vue({
    el:'#app',
    //使用路由對象實例
    router:router1,
    render:c=>c(App)  //es6寫法
})
View Code

 

基於Vue.js的組件庫——Mint-ui

Mint-ui 包含豐富的 CSS 和 JS 組件，可以知足平常的移動端開發須要。經過它，能夠快速構建出風格統一的頁面，提高開發效率。真正意義上的按需加載組件。能夠只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。下面咱們一塊兒看看具體的使用步驟

步驟一：安裝mint-ui

步驟二：配置入口文件

main.js

//1.0導入vue核心包
import Vue from 'vue';

//2.0 導入App.vue的vue對象
import App from './App.vue';

//3.0 導入vue-router
import vueRouter from 'vue-router';

//3.0.1將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//3.0.2導入路由規則對應的組件對象
import login from './components/account/login.vue';
import register from './components/account/register.vue';

//3.0.3定義路由規則
var router1 = new vueRouter({
  routes: [{
      path: '/login',
      component: login
    },
    {
      path: '/register',
      component: register
    }
  ]
});

//4.0註冊mint-ui
//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//5.0利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App) //es6寫法
})
View Code

步驟三：配置根組件

App.vue

<!--之後項目的根組件-->
<template>
  <div>   
    <router-link to="/login">登陸</router-link>
    <router-link to="/register">註冊</router-link>
    
    <!--路由佔位符-->
    <router-view></router-view>
    
    <!--使用mint-ui中的button組件-->
    <mt-button type="primary" size="large" @click="tip">primary</mt-button>
  </div>
</template>

<script>
  //導入mint-ui的js模塊
  import {Toast} from 'mint-ui';
  export default { 
    data() { 
      return {

      }
    },
    methods: {
      //使用mint-ui中的js
      tip:function(){
          Toast('hello');
      }
    },
    created() {

    }
  }
</script>

<style>

</style>
View Code

 

最接近原生APP體驗的高性能前端框架——MUI

與mint-ui一樣是款框架，那麼問題來了，咱們須要這麼多框架究竟是爲了幹嘛？實際上是由於想要的組件在一個框架上並無，本身又技術水平又渣，沒辦法開發出來，因此只好尋找另外一個框架來結合使用。好了，廢話很少說，下面請看使用步驟

步驟一：進入官網，點擊右上角的github地址，將源代碼下載到本地，而後將mui源代碼的dist文件夾下的三個文件複製到vue項目中

【注意】

當編譯出錯的時候，要將mui->css->mui.css文件中url裏的單引號改成雙引號）

步驟二：配置入口文件

//1.0導入vue核心包
import Vue from 'vue';

//2.0 導入App.vue的vue對象
import App from './App.vue';

//3.0 導入vue-router
import vueRouter from 'vue-router';

//3.0.1將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//3.0.2導入路由規則對應的組件對象
import login from './components/account/login.vue';
import register from './components/account/register.vue';

//3.0.3定義路由規則
var router1 = new vueRouter({
  routes: [{
      path: '/login',
      component: login
    },
    {
      path: '/register',
      component: register
    }
  ]
});

//4.0註冊mint-ui
//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//5.0註冊mui的css樣式
import '../static/mui/css/mui.css';

//6.0利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App) //es6寫法
})
View Code

步驟三：九宮格示例（App.vue）

<!--之後項目的根組件-->
<template>
  <div>
    <router-link to="/login">登陸</router-link>
    <router-link to="/register">註冊</router-link>

    <!--路由佔位符-->
    <router-view></router-view>

    <!--使用mint-ui中的button組件-->
    <mt-button type="primary" size="large" @click="tip">primary</mt-button>

    <!--使用mui中九宮格的樣式-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">Home</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
            <div class="mui-media-body">Email</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">Chat</div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  //導入mint-ui的js模塊
  import { Toast } from 'mint-ui';

  export default {
    data() {
      return {

      }
    },
    methods: {
      //使用mint-ui中的js
      tip: function() {
        Toast('hello');
      }
    },
    created() {

    }
  }
</script>

<style>

</style>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程