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:;
}
.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的更多相关文章
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...
- Vue学习之webpack中使用vue(十七）
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
- Node 使用webpack编写简单的前端应用
编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...
- vue+vux+es6+webpack移动端常用配置步骤
1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = requ ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- 创建一个 Vue 的实例
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 选项:el.data.methods el: 类型: ...
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
随机推荐
- Vagrant 基础全面解析
这篇 Vagrant 入门文章将带你创建一个 Vagrant 项目,这个过程将会用到 Vagrant 所提供的主要基本特性.如果想了解 Vagrant 能为你带来哪些好处,可以阅读 Vagrant 官 ...
- .NET 提升教育 第一期：VIP 付费课程培训通知！
为响应 @当年在远方 同学的建议,在年前尝试进行一次付费的VIP培训. 培训的课件:点击下载培训周期:10个课程左右,每晚1个半小时培训价格:1000元/人.报名方式:有意向的请加QQ群:路过秋天.N ...
- java基础_集合List与Set接口
List接口继承了Collection的方法 当然也有自己特有的方法向指定位置添加元素 add(索引,添加的元素); 移除指定索引的元素 remove(索引) 修改指定索引的元素 set ...
- iOS的ATS配置 - 2017年前ATS规定的适配
苹果规定 从2017年1月1日起,新提交的 app 不允许使用NSAllowsArbitraryLoads来绕过ATS(全称:App Transport Security)的限制. 以前为了能兼容ht ...
- JavaScript常见的五种数组去重的方式
▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...
- angular2系列教程（六）两种pipe：函数式编程与面向对象编程
今天,我们要讲的是angualr2的pipe这个知识点. 例子
- 如何利用tcpdump对mysql进行抓包操作
命令如下: tcpdump -s -l -w - dst -i eno16777736 |strings 其中-i指定监听的网络接口,在RHEL 7下,网络接口名不再是之前的eth0,而是 eno16 ...
- SSH框架和Redis的整合(2)
5. 添加功能的实现 新建一个Action:RClasAction,实现向Redis添加课程数据,并同步到MySQL. package com.school.action; import java.u ...
- MediatorPattern（中介者模式）
/** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...
- 负载均衡——nginx理论
nginx是什么? nginx是一个强大的web服务器软件,用于处理高并发的http请求和作为反向代理服务器做负载均衡.具有高性能.轻量级.内存消耗少,强大的负载均衡能力等优势. nginx架构? ...