闲聊：
今天是六一儿童节哟，小颖祝大家节日快乐哈哈哈。其实这个demo小颖断断续续做了将近两个礼拜了，心塞的，其实这个也没有多难，主要是小颖有点最近事情有点多，所以就把这个一直拖着，今天好不容易做好了嘻嘻。我们一起来看看效果图吧：
相关技术：
1.vue2.0
2.webpack
3.element
vue2.0环境搭建：
1.检查本地是否安装node：node -v
如果没有安装从node官网上下载相应的node，安装成功即可。
2.检查本地npm版本：npm -v，如果版本太低可以通过：npm install -g npm进行升级
3.全局安装webpack：npm install webpack -g
4.安装vue脚手架：npm install vue-cli -g
5.新建空文件夹，根据模板创建项目：
vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目： vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
会有一些初始化的设置，如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字
Use sass 小颖的这个demo要用sass所以，小颖选的yes，大家可以根据自己的需求选择yes or no
在你的项目根目录下，运行：npm run dev之后，会自动打开你的默认浏览器：http://localhost:8080/ 效果如下：
项目目录：
------------------mydemo
--------------------------src
----------------------------------page
--------------------------------------------------menu1
---------------------------------------------------------------------menuTab.vue
---------------------------------------------------------------------menuTable.vue
--------------------------------------------------menu2
--------------------------------------------------404.vue
--------------------------------------------------home.vue
--------------------------------------------------login.vue
----------------------------------App.vue
----------------------------------main.js
----------------------------------router.js
--------------------------favicon.ico
--------------------------index.html
--------------------------package.json
--------------------------webpack.config.js
然后我们将自己想要的页面什么的慢慢加进去：
1.在根目录下添加favicon.ico图标，小颖是直接把：mydemo/src/assets下的logo.png改成favicon.ico。
2.在webpack.config.js中添加以下代码：
然后我们再执行一次：npm run dev
然后就报错啦报错啦：
解决方法：
执行npm install html-webpack-plugin -save-v
3.在index.html中引入favicon.ico图标：
<link rel="shortcut icon" href="favicon.ico"/>
4.新增所需vue文件和js文件：
5.引入所需的npm：element-ui、vue-router、font-awesome、style-loader。
最后呢我们一起来看看具体哪些重要的vue文件和js文件代码是什么样子的。
代码来啦：
webpack.config.js
path = require('path' webpack = require('webpack' HtmlWebpackPlugin = require('html-webpack-plugin'='./src/main.js''./dist''/dist/''build.js'/\.vue$/'vue-loader'
'scss': 'vue-style-loader!css-loader!sass-loader''sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'/\.js$/'babel-loader'/node_modules//\.css$/"style-loader!css-loader"/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/'file-loader'/\.(png|jpg|gif|svg)$/'file-loader''[name].[ext]?[hash]''index.html''favicon.ico',
inject:}) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
package.json
{ "name": "mydemo", "description": "A Vue.js project", "version": "1.0.0", "author": "xiaoying", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}, "dependencies": { "element-ui": "^1.3.4", "font-awesome": "^4.7.0", "vue": "^2.3.3", "vue-router": "^2.5.3"
}, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.28.0", "node-sass": "^4.5.0", "sass-loader": "^5.0.1", "style-loader": "^0.18.1", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5"
}
}
index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>mydemo</title> <link rel="shortcut icon" href="favicon.ico"/> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body></html>
router.js
import Vue from "vue"import VueRouter from "vue-router"// 引入组件import login from './page/login.vue'import home from './page/home.vue'import notFound from './page/404.vue'import menutab from './page/menu1/menuTab.vue'import menutable from './page/menu2/menuTable.vue'// 要告诉 vue 使用 vueRouterVue.use(VueRouter);
let routes = [{
path: '/login',
component: login,
name: '',
hidden: true
},
{
path: '/404',
component: notFound,
name: '',
hidden: true
},
{
path: '/',
component: home,
name: '导航一',
iconCls: 'el-icon-message', //图标样式class children: [{
path: '/menutab',
component: menutab,
name: 'Tab'
}]
},
{
path: '/',
component: home,
name: '导航二',
iconCls: 'fa fa-id-card-o',
children: [{
path: '/menutable',
component: menutable,
name: 'Table'
}
]
}
];var router = new VueRouter({
routes
})
export default router;
main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import Router from 'vue-router';import App from './App.vue';
import 'font-awesome/css/font-awesome.min.css'Vue.use(ElementUI);
Vue.use(Router);
router.beforeEach((to, from, next) => { if (to.path == '/login') {
sessionStorage.removeItem('user');
}
let user = JSON.parse(sessionStorage.getItem('user')); if (!user && to.path != '/login') {
next({
path: '/login'
});
} else {
next();
}
});// 引入路由import router from "./router.js"new Vue({
el: '#app',
router, // 注入到根实例中
render: h => h(App)
});
App.vue
<template><div id="app">
<router-view></router-view></div></template><script>export default {}</script><style lang="scss">body {
margin: 0;
padding: 0;
font-size: 14px;
-webkit-font-smoothing: antialiased;
overflow: scroll;
overflow-y: hidden;}#app {
position: absolute;
top: 0;
bottom: 0;
width: 100%;}.el-submenu [class^=fa] {
vertical-align: baseline;
margin-right: 10px;}.el-menu-item [class^=fa] {
vertical-align: baseline;
margin-right: 10px;}.toolbar {
background: #f2f2f2;
padding: 10px;
margin: 10px 0;
.el-form-item {
margin-bottom: 10px;
}}</style>
login.vue
<template><div class="login-page-container">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
<h3 class="title">系统登录</h3>
<el-form-item prop="account">
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="handleSubmit2" :loading="logining">登录</el-button>
</el-form-item>
</el-form></div></template><script>export default {
props: {
},
data() { return {
logining: false,
作者：爱喝酸奶的吃货
出处：http://www.cnblogs.com/yingzi1028/
本博客文章大多为原创，转载请请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
标签: vue, element, node, webpack
http://www.cnblogs.com/yingzi1028/p/6925387.html
更多精彩分享
- 万码学堂联系方式 2024-05-09 15:57:29.91
- 陆老师 [海军工程大学 硕士 — 嵌入式开发专家] 2024-03-26 11:26:03.003
- 时光飞逝 2024-03-26 11:25:53.823
- 纸上得来终觉浅 2024-03-26 11:25:42.68
- 软件行业发展七大方向 2024-03-26 11:25:34.457
- 如何组建测试团队？ 2024-03-26 11:25:25.33
- 在青岛学习JavaEE哪家学校最好？ 2024-03-26 11:25:16.78
- 教务排课系统 2024-03-26 11:24:56.74
- 青岛帕特智能科技有限公司 2024-03-26 11:24:30.433
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26 11:24:15.657
万码学堂联系方式