商城开发笔记-js配置

js模块介绍

这个项目使用的ui是inspinia, 我觉得还挺好看的, 所以就选择了这个。

大概看了一下, 有用到这几个js模块:

• jquery
• bootstrap
• jquery.metisMenu
• jquery.slimscroll
• inspinia
• pace
• bootstrap-datepicker
• summernote

在Vue项目引用jQuery

步骤如下:

• 在package.json文件的dependencies中添加: "jquery": "^3.3.1"

• 接着在build/webpack.bash.conf.js文件中的头部分添加:

  const webpack = require('webpack')

• 还是这个文件, 在module.exports部分中添加:

  plugins: [
      new webpack.ProvidePlugin({
          $: 'jquery'
      })
  ]

  如果已经有plugins, 就直接写声明部分

• 最后在main.js入口文件中, 添加:

  import $ from 'jquery'
  
  Vue.prototype.$ = $

这样就可以直接使用this.$来进行对元素的操作了。

使用 BootstrapVue

首先安装:

npm install vue bootstrap-vue bootstrap --save-dev

接着在 main.js 中声明 bootstrap-vue:

import '~/bootstrap/dist/css/bootstrap.css'
import '~/bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

这样就可以直接使用 bootstrap 的组件了。关于组件的详细信息可以查看官网。

在 Vue 中使用 jquery.metisMenu 和 jquery.slimscroll

同样的, 首先安装:

npm install --save metismenu jquery-slimscroll

在 main.js 中使用 require 来加载 metisMenu 和 slimscoroll:

require('metismenu')
require('jquery-slimscroll')

关于 import 和 require 的区别, 请查看import和require的区别。

之后就可以直接使用了, 关于 metisMenu 的使用方法请查看官网。

使用 bootstrap-datepicker

这个和之前的步骤不太一样。首先到官网将最新的版本下载下来, 然后将 css 和 js 两个文件夹放置项目的静态文件目录, 假定为 /src/static文件夹下。

之后在 main.js 中引入文件:

import '../static/css/bootstrap-datepicker.css'
import '../static/js/bootstrap-datepicker.js'

就可以了。

在 vue 中使用 summernote

首先安装:

npm install --save codemirror font-awesome moment popper.js summernote tooltip.js

安装好之后在 main.js 中引入:

require('popper.js')
require('tooltip.js')
require('bootstrap')
require('summernote')

大功告成!

在Vue中引用js文件

先说怎么操作:

1. 在build/webpack.base.conf.js文件中的module.exports部分里面的alias里添加:

   module.exports = {
   	// ... 省略前面的代码
   	resolve: {
       extensions: ['.js', '.vue', '.json'],
       alias: {
   		`apiTools`: resolve('src/api/tools.js')
   	}
   }
   
   // ...省略后面的代码

2. 在main.js里引用:

   import tools from 'apiTools'
   import tools2 from 'apiTools'

   补充, apiTools.js内容是:

   function tools () {
     console.log('test')
   }
   
   function tools2() {
   	console.log('test2')
   }
   
   export default {
     tools: tools(),
     tools2: tools2()
   }

3. 调用js方法

   export default {
     name: 'App',
     mounted() {
       tools
       tools2
     }
   }
   </script>

大概就是这三步, 那么接下来解释一下:

第一步, 设置别名, 如果接触过linux系统的话, 对别名应该比较熟悉。其实就是字符串替换, 比如上面的例子, 就是将apiTools替换成了后面的路径。
第二步, 引用js文件, 这里import后面的是js文件暴露出的方法名(或者是变量名), from 后面的是前面约定好的替换的字符串。
最后一步, 直接调用就可以。

补充

在配置字符串替换的时候, 可能有关键字的问题, 这个还不太确定, 所以在配置的时候尽量避免使用那些常用的字符串。