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 ...
随机推荐
- 理解Maven中的SNAPSHOT版本和正式版本
Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...
- 对抗密码破解 —— Web 前端慢 Hash
(更新:https://www.cnblogs.com/index-html/p/frontend_kdf.html ) 0x00 前言 天下武功,唯快不破.但在密码学中则不同.算法越快,越容易破. ...
- 黑云压城城欲摧 - 2016年iOS公开可利用漏洞总结
黑云压城城欲摧 - 2016年iOS公开可利用漏洞总结 作者:蒸米,耀刺,黑雪 @ Team OverSky 0x00 序 iOS的安全性远比大家的想象中脆弱,除了没有公开的漏洞以外,还有很多已经公开 ...
- C#学习资源
# 视频 C#程序设计 Cousera(推荐) # 文档 C#教程 MSDN Microsoft API 和参考目录
- 如何选择PHP框架？
PHP是世界上最受欢迎的编程语言之—.最近发布的PHP7令这种服务器的编程语言比以前变得更好,更稳定了. PHP被广泛应用于重大的项目.例如Facebook就是使用PHP来维护和创建它们的内部系统的. ...
- JavaScript权威指南 - 对象
JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...
- 前端学HTTP之重定向和负载均衡
前面的话 HTTP并不是独自运行在网上的.很多协议都会在HTTP报文的传输过程中对其数据进行管理.HTTP只关心旅程的端点(发送者和接收者),但在包含有镜像服务器.Web代理和缓存的网络世界中,HTT ...
- 免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）
前面介绍了六种.NET组件,其中有一种组件是写文件的压缩和解压,现在介绍另一种文件的解压缩组件SharpZipLib.在这个组件介绍系列中,只为简单的介绍组件的背景和简单的应用,读者在阅读时可以结合官 ...
- 设计模式之行为类模式大PK
行为类模式大PK 行为类模式包括责任链模式.命令模式.解释器模式.迭代器模式.中介者模式.备忘录模式.观察者模式.状态模式.策略 ...
- 一起学 Java（二）面向对象
一.方法函数 函数也称为方法,就是定义在类中的具有特定功能的一段独立代码.用于定义功能,提高代码的复用性. 函数的特点1> 定义函数可以将功能代码进行封装,便于对该功能进行复用:2> 函数 ...