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 ...
随机推荐
- Python高手之路【六】python基础之字符串格式化
Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- 微信小程序体验(2)：驴妈妈景区门票即买即游
驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...
- 游戏编程系列[1]--游戏编程中RPC协议的使用[3]--体验
运行环境,客户端一般编译为.Net 3.5 Unity兼容,服务端因为用了一些库,所以一般为4.0 或往上.同一份代码,建立拥有2个项目.客户端引用: WindNet.Client服务端引用: OpL ...
- java head space/ java.lang.OutOfMemoryError: Java heap space内存溢出
上一篇JMX/JConsole调试本地还可以在centos6.5 服务器上进行监控有个问题端口只开放22那么设置的9998端口 你怎么都连不上怎么监控?(如果大神知道还望指点,个人见解) 线上项目出现 ...
- 在docker中运行ASP.NET Core Web API应用程序(附AWS Windows Server 2016 widt Container实战案例)
环境准备 1.亚马逊EC2 Windows Server 2016 with Container 2.Visual Studio 2015 Enterprise(Profresianal要装Updat ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- jQuery的属性
The Write Less , Do More ! jQuery的属性 1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值 ①获取属性 < ...
- JavaScript基础知识总结（三）
JavaScript语法 七.循环语句 1.while 语法: while (exp) { //statements; } 说明:while (变量<=结束值) { 需执行的代码 } 例子: / ...
- 编写高质量代码:改善Java程序的151个建议(第8章:异常___建议114~117)
建议114:不要在构造函数中抛出异常 Java异常的机制有三种: Error类及其子类表示的是错误,它是不需要程序员处理也不能处理的异常,比如VirtualMachineError虚拟机错误,Thre ...