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 ...
随机推荐
- Phoenix综述（史上最全Phoenix中文文档）
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...
- Android实现TCP断点上传，后台C#服务实现接收
终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因为大多实现过断点下载.但稳定性不能保证, ...
- CSS 3学习——transform 2D转换
首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
- .NET平台和C#编程的总结
第一章 简单认识.NET框架 (1)首先我们得知道 .NET框架具有两个主要组件:公共语言进行时CLR(Common Language Runtime)和框架类库FCL(Framework ...
- winform 窗体圆角设计
网上看到的很多winform窗体圆角设计代码都比较累赘,这里分享一个少量代码就可以实现的圆角.主要运用了System.Drawing.Drawing2D. 效果图 代码如下. private void ...
- Nginx学习笔记--001-Nginx快速搭建
Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...
- 【干货分享】流程DEMO-借款申请
流程名: 借款申请 业务描述: 当员工个人在工作中需要进行借款时,通过此项流程提交借款申请,审批通过后,财务部进行款项支付. 流程相关文件: 流程包.xml WebService业务服务.xm ...
- SharePonit 2010 更改另存为列表模板的语言类型
从朋友处得来一个列表模板:AccessApplicationSharePoint.stp 将其通过:网站操作----网站设置----列表模板,上传进去.然后去创建列表,发现找不到此模板. 根据多年老司 ...
- BPM配置故事之案例9-根据表单数据调整审批线路2
老李:好久不见啊,小明. 小明:-- 老李:不少部门有物资着急使用,现在的审批流程太慢了,申请时增加一个是否加急的选项吧.如果选加急,金额1000以下的直接到我这里,我审批完就通过,超过1000的直接 ...
- RMS Server打开或关闭日志记录
原文: https://technet.microsoft.com/zh-cn/library/cc732758 在 Active Directory Rights Management Servic ...