vue+node+es6+webpack创建简单vue的demo

首页 > 代码库 > vue+node+es6+webpack创建简单vue的demo

vue+node+es6+webpack创建简单vue的demo

2024-08-27 00:12:48 220人阅读

闲聊：

小颖之前一直说是写一篇用vue做的简单demo的文章，然而小颖总是给自己找借口，说没时间，这一没时间一下就推到现在了，今天抽时间把这个简单的demo整理下，给大家分享出来，希望对大家也有所帮助。

前期准备：

1.安装node 安装包地址这个里面有两个安装包大家可以根据自己的需求选择安装4.4.4版本或者6.2.0版本，小颖选择的是6.2.0。

2.Atom编辑器，这个大家可以根据自己的喜好选择自己喜欢的编辑器，所以小颖就不发下载链接了，大家有需求的话可以百度下嘻嘻。

技术分享

创建项目：

1.执行npm init创建一个 package.json

技术分享

执行完后，会发现你的文件夹下会多产生package.json文件

技术分享

2.npm install 所需的依赖包在这里小颖就不给大家一一截图了，小颖把所需的依赖包列举出来大家自己npm下

技术分享

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：

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

html：

<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>

9.在项目根目录下打开cmd窗口，执行：webpack -c -w

技术分享

执行完：webpack -c -w 后大家会发现项目根目录下会生成一个static文件

技术分享

然后大家将index.html拖至浏览器打开，小颖用的是谷歌浏览器，大家可以根据自己的喜好，在浏览器中打开index.html文件

效果图：

小颖第一遍输入的密码是：111，第二遍输入的密码是：123

技术分享

vue+node+es6+webpack创建简单vue的demo

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > vue+node+es6+webpack创建简单vue的demo