vue+node+es6+webpack建立簡單vue的demo

時間 2019-12-14

標籤 vue+node+es6+webpack vue node webpack 建立簡單 demo 简体版

原文原文鏈接

閒聊：javascript

小穎以前一直說是寫一篇用vue作的簡單demo的文章，然而小穎老是給本身找藉口，說沒時間，這一沒時間一下就推到如今了，今天抽時間把這個簡單的demo整理下，給你們分享出來，但願對你們也有所幫助。css

前期準備：html

1.安裝node 安裝包地址這個裏面有兩個安裝包你們能夠根據本身的需求選擇安裝4.4.4版本或者6.2.0版本，小穎選擇的是6.2.0。vue

2.Atom編輯器，這個你們能夠根據本身的喜愛選擇本身喜歡的編輯器，因此小穎就不發下載連接了，你們有需求的話能夠百度下嘻嘻。java

目錄：node

建立項目：webpack

1.執行npm init建立一個 package.json

執行完後，會發現你的文件夾下會多產生package.json文件es6

2.npm install 所需的依賴包在這裏小穎就不給你們一一截圖了，小穎把所需的依賴包列舉出來你們本身npm下

for creation 
step1:npm init
vue庫:
step2:npm install --save vue vue-hot-reload-api vue-html-loader vue-resource vue-router vue-style-loader vue-loader vue-touch
webpack庫:
step3:npm install --save webpack webpack-dev-server 
css庫:
step4:npm install --save style-loader stylus stylus-loader css-loader
打包圖片和文件:
step5:npm install --save url-loader file-loader
es6支持庫:
step6:npm install --save babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime es6-promise
bootstrap庫
step7:npm install --save bootstrap
step8:webpack  -c -w

for developer
step1:npm install
step2:webpack -c -w

3.建立webpack.config.js文件

'use strict';

var vue = require('vue-loader')
var webpack = require('webpack')
module.exports = {
    entry: "./src/main.js",
    output: {
        path: './static',
        publicPath: '/static/',
        filename: 'build.js'
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, 
        {
            test: /\.js$/,
            exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
            loader: 'babel'
        }, 
        { test: /\.css$/, loader: "style-loader!css-loader" }, 
        { test: /\.png$/, loader: "url-loader?mimetype=image/png" }, 
        { test: /\.jpg$/, loader: "url-loader?mimetype=image/jpg" }, 
        { test: /\.woff$/, loader: "url-loader" },
        { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2"},
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream"},
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml"}]
    },
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    }
};

4.建立程序入口html文件：index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"></script>
    <title>myDemo</title>
</head>
<body>
<!--此處注意加載順序,須要先加載dom在加載js,不然會'Cannot find element: #app'-->
     <div id='app'></div>
      <script src="static/build.js"></script>
</body>
</html>

5.建立頁面入口文件:App.vue

css：web

<style>
.public-content {
    padding: 20px;
    width: 200px;
    float: left;
}
</style>

html：vue-router

<template>
<div class='all-page-container'>
    <login v-if='loginShowFlag' :loginshowflag.sync='loginShowFlag'></login>
    <div class='public-content' v-if='!loginShowFlag'>恭喜你登陸成功
        <div class='menu'>
            <a v-link='"/home"'>home頁</a>
        </div>
    </div>
    <router-view transition='animation' class='content' keep-alive></router-view>
</div>
</template>

js：

<script>
import login from './page/login.vue'
import home from './page/home.vue'
export default {
  components: {
    login,
    home
  },
  methods:{
    loadData:function(){
    },
  },
  data(){
    return {
      loginShowFlag:true
    }
  }
}
</script>

6.建立程序入口文件，加載各類公共組件：main.js(主要js，導入vue插件，配置路由等)

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import Resource from 'vue-resource'
//import VueTouch from 'vue-touch'
var VueTouch = require('vue-touch')
import bootstrap from 'bootstrap/dist/css/bootstrap.css'


Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);


import home from './page/home.vue'
var router = new Router({
  abstract: true,
  hashbang: false
});

router.map({
    '/home':{
        component:home
    },
});
router.start(App, '#app');

7.建立登陸頁面：login.vue

css：

<!-- 登陸界面 -->
<style scoped>
.offset1{
    margin-top: 200px;
    position: relative;
    border: 1px solid #ddd;
    background-color: #fff;
    position: relative;
    max-width: 400px;
    padding: 0;
}
.owl-login{
    width: 211px;
    height: 108px;
    background-image: url("../img/owl-login.png");
    position: absolute;
    top: -100px;
    left: 50%;
    margin-left: -111px;
}
.owl-login .hand{
    width: 34px;
    height: 34px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    background-color: #472d20;
    -webkit-transform: scaleY(0.6);
    -moz-transform: scaleY(0.6);
    -o-transform: scaleY(0.6);
    -ms-transform: scaleY(0.6);
    transform: scaleY(0.6);
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    position: absolute;
    left: 14px;
    bottom: -8px;
}
.owl-login .hand.hand-r{
    left: 170px;
}
.owl-login .arms{
    top: 58px;
    position: absolute;
    width: 100%;
    height: 41px;
    overflow: hidden;
}
.loginform .pad{
    overflow: hidden;
    padding: 30px;
}
.loginform .controls{
    position: relative;
    margin-bottom: 10px;
}
.loginform label {
    position: absolute;
    top: 13px;
    left: 13px;
    font-size: 16px;
    color: rgba(0,0,0,0.3);
}
.loginform input {
    padding: 9px 6px 9px 40px;
    height: auto;
}
.loginform input{
    color: #444;
}
.loginform .form-actions{
    border-top: 1px solid #e4e4e4;
    background-color: #f7f7f7;
    padding: 15px 30px;
    text-align: right;
}
.pull-left {
    float: left !important;
}
</style>

html：

<template>
<div class='login-container' v-if='loginshowflag'>
    <div class='container offset1 loginform'>
        <div class='owl-login'>
            <div class='hand'></div>
            <div class='hand hand-r'></div>
            <div class='arms'></div>
        </div>
        <div class='pad'>
            <div class='control-group'>
                <div class='controls'>
                    <label class='glyphicon glyphicon-user'></label>
                    <input type="text" class='form-control input-medium' placeholder="登陸名" tabindex="1" v-model='loginName'>
                </div>
            </div>
            <div class='control-group'>
                <div class='controls'>
                    <label class='glyphicon glyphicon-asterisk'></label>
                    <input type="password" class='form-control input-medium' placeholder="Password" tabindex="2" v-model='passWord'>
                </div>
            </div>
        </div>
        <div class='form-actions'>
            <a href="#" class='btn pull-left btn-link text-muted'>Forgot password?</a>
            <a href="#" class='btn btn-link text-muted'>Sign Up</a>
            <button type="submit"  class='btn btn-primary' @click='loginFun'>Login</button>
        </div>
    </div>
</div>
</template>

js：

<script>
export default {
    props: {
        loginshowflag:{
            required:true,
        }
    },
    components: {
    },
    ready: function() {
    },
    methods: {
        loginFun:function(){
            if(this.loginName=='小穎'&&this.passWord=='123'){
                this.loginshowflag=false;
            }else{
                alert('登陸名或密碼錯誤!');
            }
        }
    },
    data() {
        return {
            loginName:'',
            passWord:''
        }
    }
}
</script>

8.建立home頁面：home.vue

css：

<style scoped>
.home-container {
    width: 1000px;
    float: left;
    margin-top: 20px;
}
</style>

html：

<template>
<div class='home-page'>
    <div class="home-container">我是home頁面</div>
</div>
</template>

js：

<script>
export default {
    props: {
        projectid:{
            required:true,
            twoWay:true
        },            
        projectdata:{
            required:true,
            twoWay:true
        }    
    },
    components: {
    },
    ready: function() {
    },
    methods: {
    },
    data() {
        return {
        }
    }
}
</script>