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