es6+webpack+vue项目实践
2023-09-27 14:29:05 时间
最近开发一个铜盘功能,用了以上的技术栈开发。有一些心得可以记录下来。包括写的模块的经验。
构建
后台是用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-loader
webpack库:
npm install webpack, webpack-dev-server
css库:
npm install style-loader, stylus, stylus-loader, css-loader
gulp库:
npm install gulp
es6支持库:
npm install babel-core, babel-loader, babel-plugin-transform-runtime, babel-preset-es2015, babel-runtime, es6-promise
jquery库:
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,代码在下面
相关文章
- 9个常用ES6特性归纳(一般用这些就够了)
- es6扩展运算符的使用
- ES6 对Math对象的扩展
- ES6 Promise 的最佳实践
- vue项目实战:项目搭建使用vue+Es6+webpack+vuex+axios+Element ui完成 文件夹内容的确定
- es6 Map
- TeeChart JS 2022新的ES6编码库可动态加载的模块加载
- ES6 基础
- Vue(ES6)中的data属性为什么不能是一个对象?
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- React Native 的ES5 ES6写法对照表
- ES6 系列之 defineProperty 与 proxy
- 深入理解ES6 class
- ES6中Json的与Map之间的转换
- es6 Generator与异步的同步书写
- ES6 新特性范例大全