es6+webpack+vue项目实践
来源：互联网 发布：校园预防网络诈骗ppt 编辑：程序博客网 时间：2024/05/25 16:38
最近开发一个铜盘功能，用了以上的技术栈开发。有一些心得可以记录下来。包括写的模块的经验。
构建
后台是用java实现，使用velocity模板。目录结构
---webapp|-----resource|--------init // 初始js文件|--------src|-----------business // 业务vue组件|-----------components // 基础vue组件|--------stylesheets|-----------style.css // 基础css样式|-----WEB-INF|--------view // velocity|-----------include // 公用velocity模板|-----------xxx.vm // 业务velocity以上是基础目录结构，现在开始构建前端环境。
配置npm
（以下配置行为的前提是该项目没有配置过）
执行 npm init 配置，按要求填写配置内容。生成pakcage.json。
安装库，包括：
(请不要复制)vue库:npm install vue, vue-hot-reload-api, vue-html-loader, vue-resource, vue-router, vue-style-loaderwebpack库:npm install webpack, webpack-dev-servercss库:npm install style-loader, stylus, stylus-loader, css-loadergulp库:npm install gulpes6支持库:npm install babel-core, babel-loader, babel-plugin-transform-runtime, babel-preset-es2015, babel-runtime, es6-promisejquery库:npm install jquery配置webpack
var vue = require('vue-loader');var webpack = require('webpack');var path = require('path');var paths = { src: './resources/src/', dist: './resources/dist/'};module.exports = { entry: { 'fileList': paths.src + 'business/fileList/app.js', 'uploadFile': paths.src + 'business/uploadFile/app.js' // 'interface': paths.src + 'javascripts/interface.js' }, output: { path: paths.dist + 'business', publicPath: paths.dist + 'business', filename: '[name].js' }, resolve: { extensions: ['', '.js', '.vue', '.styl'], alias: { 'src': path.resolve(__dirname, './resources') } }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [{ test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//, loader: 'babel' }, { // edit this for additional asset file types test: /\.(png|jpg|gif)$/, loader: 'url', query: { // inline files smaller then 10kb as base64 dataURL limit: 10000, // fallback to file-loader with this naming scheme name: '[name].[ext]?[hash]' } }, { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }] }, babel: { presets: ['es2015'], plugins: ['transform-runtime'] }, // 如果要全部都用jQuery，就用插件的方法加载jQuery，代码在下面 0 0
- es6+webpack+vue项目实践
- es6+webpack+vue项目实践
- es6+webpack+vue项目实践
- Vue + webpack 项目实践
- webpack+vue+bootstrap项目实践
- vue+webpack+es6+sass
- Vue + webpack 项目实践(入门转)
- webpack+vue+vueRouter+es6 构建的简单实例项目
- 使用ES6+vue+elementui+webpack搭建简单项目
- vue+webpack项目实战
- Vue +webpack 项目
- webpack 构建Vue项目
- webpack + vue项目搭建
- vue + webpack 构建项目
- vue + webpack 构建项目
- 初识 webpack vue项目
- vue全家桶系列2-webpack+es6
- vue +vue-router + es6 +webpack 高仿饿了么app
- angular学习心得体会
- 初识C语言
- CodeForces 721A One-dimensional Japanese Crossword
- 设计模式～装饰模式
- TeamViewer和Configure Virtual Serial Port Driver进行远程桌面控制
- es6+webpack+vue项目实践
- 算法笔试题(六)：删除给定字符串中出现次数最多的字符
- angularJS 购物车练习
- 『Scrapy』登陆知乎中遇到的各种坑
- java List集合中contains方法总是返回false
- 通过输入cmd命令提示符将txt多个文本合并成一个文本
- Leetcode 234 Palindrome Linked List
- Android开发中动画使用的注意事项
- 美国昆腾17年2季度财报营收1.32~1.34亿美
