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 ...
随机推荐
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- 【每日一linux命令4】常用参数：
下面所列的是常见的参数(选项)义: --help,-h 显示帮助信息 --version,-V ...
- 06.SQLServer性能优化之---数据库级日记监控
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 之前说了一下数据库怎么发邮件:http://www.cnblogs.com/duniti ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...
- ASP.NET Core的路由[4]：来认识一下实现路由的RouterMiddleware中间件
虽然ASP.NET Core应用的路由是通过RouterMiddleware这个中间件来完成的,但是具体的路由解析功能都落在指定的Router对象上,不过我们依然有必要以代码实现的角度来介绍一下这个中 ...
- 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息？
HostingEnvironment是承载应用当前执行环境的描述,它是对所有实现了IHostingEnvironment接口的所有类型以及对应对象的统称.如下面的代码片段所示,一个HostingEnv ...
- iOS - 模态Model视图跳转和Push视图跳转的混合需求实现原理
在研发中总会遇到一些莫名的需求,本着存在即合理的态度跟大家分享一下"模态Model视图跳转和Push视图跳转的需求实现",本文仅仅传授研发技术不传授产品以及UE的思想,请大家合理对 ...
- 在redis中使用lua脚本让你的灵活性提高5个逼格
在redis的官网上洋洋洒洒的大概提供了200多个命令,貌似看起来很多,但是这些都是别人预先给你定义好的,但你却不能按照自己的意图进行定制, 所以是不是感觉自己还是有一种被束缚的感觉,有这个感觉就对了 ...
- mysql百万级分页优化
普通分页 数据分页在网页中十分多见,分页一般都是limit start,offset,然后根据页码page计算start , 这种分页在几十万的时候分页效率就会比较低了,MySQL需要从头开始一直往后 ...
- SQL Server 批量删除存储过程
原理很简单的'drop proc xxx'即可,下面有提供了两种方式来删除存储过程,其实本质是相同的,方法一是生成删除的sql后直接执行了,方法二会生成SQL,但需要检查后执行,个人推荐第二种做法. ...