AI专业者开发社区 1 号成员
  •  0 回帖  •  23 浏览  •  4 个月前
   

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

闲聊：

小颖之前一直说是写一篇用 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 下

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：

<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