es6+webpack+vue项目实践
来源:互联网 发布:网络投资与理财排行榜 编辑:程序博客网 时间:2024/05/29 06:40
最近开发一个铜盘功能,用了以上的技术栈开发。有一些心得可以记录下来。包括写的模块的经验。
构建
后台是用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
- Android Studio运行项目一直卡在build gradle runing 的解决方法。
- CSS3径向渐变radial-gradient真好玩
- 无外接屏幕使用树莓派
- relocation R_X86_64_32 against `.rodata' can not be used when making a shared object; recom
- kotlin---基本类型
- es6+webpack+vue项目实践
- 【MySQL】-- 安装笔记 MySQL 5.7(zip archive版本)
- 一直想得到这样一个函数,创建类的一个实例,该类由指定的泛型参数指定
- 图片1
- 6月水题集锦
- ES6(九)Symbol
- 模拟试——string
- XML教程进阶04_服务器上的XML
- 在NativeScript-angular应用中使用本地设备剪切板