前言

vue-cli作為一款mvvm框架語言(vue)的腳手架，集成了webpack環境及主要依賴，對於專案的搭建、打包、維護管理等都非常方便快捷。在開始專案之前，建議先熟悉vue.js基本語法。

基礎專案的搭建

其他依賴的新增

一、less的新增

npm install less less-loader --save

{
  test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
 
,
},

<style  lang="less" scoped>
@import "home.less";
</style>

二、jQuery的新增

npm install jquery--save

resolve: {
  extensions: ['.js', '.vue', '.json'],
 
alias: {
    'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': resolve('node_modules/jquery/src/jquery')，
  }
},

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
jQuery: "jquery",
})
]

const createLintingRule = () => ({
  test: /\.(js|vue)$/
 
,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
    formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})

node: {
  // prevent webpack from injecting useless setImmediate polyfill because Vue
  // source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
  // that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}

三、layui-layer的新增

npm install layui-layer--save

resolve: {
  extensions: ['.js', '.vue', '.json'],
alias: {
    'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': resolve('node_modules/jquery/src/jquery'),
'layer': resolve('node_modules/layui-layer/layer')
  }
},

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
jQuery: "jquery",layer: "layer"
})
],