vue-cli中js、css、less使用

vue-cli 安装js、css、less依赖

安装js依赖

cnpm install jquery --save-dev

安装css依赖

cnpm install style-loader --save-dev

cnpm install css-loader --save-dev

cnpm install file-loader --save-dev

安装less依赖

npm install less less-loader --save

配置

修改webpack.base.conf.js文件，让其支持外部的css和js

module.exports = { entry: { app:’./src/main.js’},

后面加

plugins: [

new webpack.ProvidePlugin({

$: “jquery”,

jQuery: “jquery”,

“windows.jQuery”: “jquery”

})

],

把

alias: {‘vue$’:‘vue/dist/vue.common.js’,‘src’: path.resolve(__dirname,’…/src’),‘assets’: path.resolve(__dirname,’…/src/assets’),‘components’: path.resolve(__dirname,’…/src/components’)}

改成

alias: {

‘vue$’: ‘vue/dist/vue.common.js’,

‘src’: path.resolve(__dirname, ‘…/src’),

‘assets’: path.resolve(__dirname, ‘…/src/assets’),

‘components’: path.resolve(__dirname, ‘…/src/components’),

jquery: “jquery/src/jquery”

}

修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的css和js,less

{

test: /.js$/,

loader: ‘babel-loader’,

exclude: /node_modules/

},

{

test: /.css$/,

loader: “style-loader!css-loader”,

},

{

test: /.less$/,

loader: “style-loader!css-loader!less-loader”,

},

修改webpack.base.conf.js文件，配置字体loader加载依赖，让其支持字体图标

{test: /.svg(?v=\d+.\d+.\d+)?$/, loader: ‘file-loader?mimetype=image/svg+xml’},

{test: /.woff(?v=\d+.\d+.\d+)?$/, loader: “file-loader?mimetype=application/font-woff”},

{test: /.woff2(?v=\d+.\d+.\d+)?$/, loader: “file-loader?mimetype=application/font-woff”},

{test: /.ttf(?v=\d+.\d+.\d+)?$/, loader: “file-loader?mimetype=application/octet-stream”},

{test: /.eot(?v=\d+.\d+.\d+)?$/, loader: “file-loader”}