vue基于vue-cli的项目搭建及部分依赖的添加

前言

vue-cli作为一款mvvm框架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。在开始项目之前，建议先熟悉vue.js基本语法。

基础项目的搭建

基础搭建    参考vue的官网介绍

其他依赖的添加

• less的添加
• jquery的添加
• layui-layer的添加

一、less的添加

第一步，安装less依赖      

npm install less less-loader --save

第二步， 修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

 

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

第三步， 然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)

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

二、jQuery的添加

第一步，安装jquery依赖  

npm install jquery --save

第二步， 修改webpack.base.conf.js文件

1.引入

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

2.声明

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的添加

第一步，安装  layui-layer  依赖  

npm install layui-layer --save

第二步， 修改webpack.base.conf.js文件

1.引入

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')
  }
},

2.声明

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

注意事项同jquery