如何引用开发版本？？
xiaolongyuan opened this issue · 28 comments
xiaolongyuan commented
package.json 加了依赖
"vue-antd": "okoala/vue-antd"
在项目中使用
import {vSpin} from 'vue-antd'
报错
okoala commented
@xiaolongyuan 你需要配置下项目中webpack的vue信息，参数可以像这样~~
https://github.com/okoala/vue-antd/blob/master/build%2Fwebpack%2Fwebpack.config.js#L69
xiaolongyuan commented
额 如何配置 不大明白
vue: {
loaders: {
// apply babel transform to all javascript
// inside *.vue files.
md: 'html!vue-antd-docs',
js: 'babel?optional[]=runtime&stage=2!eslint',
less: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
}
},
xiaolongyuan commented
var path = require("path");
var HTMLWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var vue = require('vue-loader')
var webpack = require('webpack')
var config = {
entry: [
path.resolve("src/main.js"),
],
output: {
path: path.resolve("dist"),
//publicPath: '/static/',
filename: "app.js",
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['', '.js'],
// 别名
//alias: {
// filter: path.join(__dirname, './src/filters'),
// components: path.join(__dirname, './src/components')
//}
},
plugins: [
new HTMLWebpackPlugin({
template: path.resolve("src/index.html"),
}),
],
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
//{
// test: /\.vue$/,
// loader: 'vue',
// vue: {
// // configure autoprefixer
// autoprefixer: {
// browsers: ['last 2 versions']
// },
// // custom loaders, this replaces the old vue.withLoaders({})
// //loaders: {
// // js: 'coffee'
// //}
// },
// devtool: '#source-map'
// //loader: vue.withLoaders({
// // // apply babel transform to all javascript
// // // inside *.vue files.
// // js: 'babel?optional[]=runtime&loose=all'
// //})
//},
// 使用Babel转换ES6，排除node_modules目录下的js
{
test: /\.js$/,
exclude: /node_modules|vue\/src/,
loader: 'babel?optional[]=runtime'
},
//{
// test: /\.js$/,
// exclude: /(node_modules|bower_components)/,
// loader: 'babel?optional[]=runtime&stage=2!eslint'
//},
{
test: /\.(png|jpg|gif)$/, loader: 'url-loader'
},
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
//{ test: /\.less/, loader: 'style!css!autoprefixer!less'},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
},
{ test: /\.(html|tpl)$/, loader: 'html-loader' },
{ test: /\.json$/, loader: "json" },
],
},
vue: {
loaders: {
// apply babel transform to all javascript
// inside *.vue files.
md: 'html!qm-web-shop-app',
js: 'babel?optional[]=runtime&stage=2!eslint',
less: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
}
},
eslint : {
configFile : './.eslintrc',
emitWarning : true
},
//module: {
// loaders: [
// {
// test: /\.vue$/,
// // apply ES2015 transform to all JavaScript in *.vue files.
// // https://github.com/vuejs/vue-loader#advanced-loader-configuration
// loader: vue.withLoaders({
// js: 'babel'
// })
// },
// {
// test: /\.js$/,
// // excluding some local linked packages.
// // not needed for normal installations
// exclude: /node_modules|vue\/src|vue-loader\/|vue-hot-reload-api\//,
// loader: 'babel'
// }
// ]
//},
//babel: {
// optional: ['runtime'],
// loose: 'all'
//}
};
module.exports = config;
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
} else {
// 开启source-map，webpack有多种source-map，在官网文档可以查到
module.exports.devtool = '#source-map'
}
okoala commented
@xiaolongyuan 你这样就差不多了，把 md: 'html!qm-web-shop-app', 这一行删掉，然后运行后看报什么错误~~注意vue-loader, vue-hot-reload-api有安装~
xiaolongyuan commented
vue-loader, vue-hot-reload-api 已安装
还是报错
ERROR in ./~/vue-antd/index.js
Module parse failed: C:\Workspace\WebstormProjects\web-shop-admin\node_modules\vue-antd\index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import './style/index.less'
| import meta from './package.json'
| import * as utils from './utils'
@ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/pages/home/welcome.vue 5:15-34
okoala commented
@xiaolongyuan 安装less-loader
xiaolongyuan commented
"dependencies": {
"es6-promise": "^3.0.2",
"lscache": "^1.0.5",
"md5": "^2.0.0",
"rest": "^1.3.1",
"vue": "^1.0.6",
"vue-async-data": "^1.0.2",
"vue-hot-reload-api": "^1.2.1",
"vue-resource": "^0.1.16",
"vue-router": "^0.7.5",
"vue-antd": "okoala/vue-antd"
},
"devDependencies": {
"async": "^0.9.2",
"bcryptjs": "^2.3.0",
"body-parser": "^1.2.4",
"colors": "^1.1.2",
"cors": "~2.7.1",
"debug": "~2.2.0",
"express": "~4.13.3",
"jwt-simple": "^0.3.0",
"moment": "^2.10.6",
"mongoose": "^4.1.11",
"morgan": "^1.6.1",
"path": "~0.12.7",
"querystring": "~0.2.0",
"request": "^2.65.0",
"browser-sync": "^2.9.11",
"bower": "~1.6.3",
"protractor": "~0.20.1",
"http-server": "^0.8.0",
"extend": "^3.0.0",
"nodemon": "^1.4.1",
"jade": "^1.11.0",
"template-html-loader": "0.0.3",
"eslint": "^1.5.1",
"eslint-config-airbnb": "^0.1.0",
"eslint-loader": "^1.1.0",
"eslint-plugin-html": "^1.0.4",
"babel": "^5.8.29",
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babel-runtime": "^5.8.25",
"babel-eslint": "^4.1.3",
"babel-preset-es2015": "^6.0.14",
"json-loader": "~0.5.3",
"css-loader": "^0.21.0",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"style-loader": "^0.13.0",
"stylus-loader": "^1.4.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^6.0.4",
"webpack": "^1.12.2",
"html-webpack-plugin": "^1.6.1",
"extract-text-webpack-plugin": "^0.8.2",
"webpack-dev-server": "^1.12.0"
},
xiaolongyuan commented
啥都有啊
xiaolongyuan commented
能给个临时方案引用？
okoala commented
@xiaolongyuan 还不能用啊？
xiaolongyuan commented
最新的可以用了？ = 我test
xiaolongyuan commented
一样的错误啊
okoala commented
@xiaolongyuan 这个很明显是less-loader 没有配置正确，所以才无法解析less文件
xiaolongyuan commented
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
},
该怎么配？
xiaolongyuan commented
我的配置在上面全贴上来了
okoala commented
@xiaolongyuan vue的配置里也要配上less
xiaolongyuan commented
vue: {
loaders: {
// apply babel transform to all javascript
// inside *.vue files.
md: 'html!qm-web-shop-app',
js: 'babel?optional[]=runtime&stage=2!eslint',
less: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
}
},
这里有吧？
okoala commented
@xiaolongyuan 你把项目简单的打包一份发出来，我这边跑跑看~
xiaolongyuan commented
okoala commented
@xiaolongyuan 配置有几个错误
- 这里不能排除vue-antd目录
// 使用Babel转换ES6，排除node_modules目录下的js
{
test: /\.js$/,
// exclude: /node_modules|vue\/src/,
loader: 'babel?optional[]=runtime'
},
- 需要安装autoprefixer-loader模块
- plugins配置中需要添加
new ExtractTextPlugin('[name].css')
xiaolongyuan commented
能否把修改完后的配置发我？ 谢谢
okoala commented
var path = require("path");
var HTMLWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var vue = require('vue-loader')
var webpack = require('webpack')
var config = {
entry: [
path.resolve("src/main.js"),
],
output: {
path: path.resolve("dist"),
//publicPath: '/static/',
filename: "app.js",
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['', '.vue', '.js'],
// 别名
//alias: {
// filter: path.join(__dirname, './src/filters'),
// components: path.join(__dirname, './src/components')
//}
},
plugins: [
new HTMLWebpackPlugin({
template: path.resolve("src/index.html")
}),
new ExtractTextPlugin('[name].css')
],
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
// 使用Babel转换ES6，排除node_modules目录下的js
{
test: /\.js$/,
// exclude: /node_modules|vue\/src/,
loader: 'babel?optional[]=runtime'
},
//{
// test: /\.js$/,
// exclude: /(node_modules|bower_components)/,
// loader: 'babel?optional[]=runtime&stage=2!eslint'
//},
{
test: /\.(png|jpg|gif)$/, loader: 'url-loader'
},
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
},
{ test: /\.(html|tpl)$/, loader: 'html-loader' },
{ test: /\.json$/, loader: "json" },
],
},
vue: {
loaders: {
// apply babel transform to all javascript
// inside *.vue files.
js: 'babel?optional[]=runtime&stage=2',
css: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader'
),
less: ExtractTextPlugin.extract(
'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
)
}
},
eslint : {
configFile : './.eslintrc',
emitWarning : true
},
};
module.exports = config;
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
} else {
// 开启source-map，webpack有多种source-map，在官网文档可以查到
module.exports.devtool = '#source-map'
}
xiaolongyuan commented
不行啊,是不是还是少了什么？已装autoprefixer-loader
[BABEL] Note: The code generator has deoptimised the styling of "C:/Workspace/WebstormProjects/web-ant-demo/node_modules/vue-antd/node_modules/velocity-animate/velocity.js" as it exceeds the max of "100KB".
Uncaught TypeError: Cannot read property 'WebSocket' of undefined(anonymous function) @ browser.js:16(anonymous function) @ app.js:1007__webpack_require__ @ app.js:521fn @ app.js:76(anonymous function) @ websocket.js:19(anonymous function) @
老外说是得排除掉
exclude: '/node_modules' is wrong.
exclude: /node_modules/ is correct.
xiaolongyuan commented
你修改了 可以运行？ 编译时没什么大问题 运行出错
okoala commented
@xiaolongyuan 我只看了编译，后面应该没多大问题了，你自己先调下
xiaolongyuan commented
编译没大问题 运行不行 出错
zhaoys commented
npm install vue-antd后，webpack编译提示 ： ， @okoala 该如何解决呢？
You may need an appropriate loader to handle this file type.
| import './style/index.less'
| import meta from './package.json'
| import * as utils from './utils'
RussellLuo commented
我也遇到了相同的问题，按照上面的方法配了半天还是没解决 😭
希望 快速上手 可以写得更详细些，不然我这种前端小白真的很难快速上手。