Vue 初始记录

安装 vue-cli

npm install --global vue-cli

vue -V

vue init webpack yourProjectName

eslint-语法检查器，不安装

router-路由，安装

test-单元测试，不安装

安装 vant

npm i vant -S

npm i babel-plugin-import -D

.babelrc 中plugin中，加入：[“import”, [{ “libraryName”: “vant”, “style”: true }]]

import { Button } from 'vant';//1引入
export default {
    components: {//2注册
	  [Button.name]: Button
	}
}
//3在 html 中使用
<van-button type="danger">危险按钮</van-button>

引入 jQuery

npm install jquery --save

在build/webpack.base.conf.js文件当中引入jquery

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

在 main.js中引入即可

import $ from 'jquery'

 

引入 zepto

npm install zepto -S

安装加载器 npm i script-loader exports-loader -D

webpack.base.conf.js中加入以下：

...
const webpack = require('webpack')

module: {
    ...,
    {
        test: require.resolve('zepto'),
        loader: 'exports-loader?window.Zepto!script-loader'   //解决zepto不支持commonJS的问题
    }
},
// 全局引入
plugins: [
    new webpack.ProvidePlugin({
        $: 'zepto',
        Zepto: 'zepto'
    })
],
node: {
    ...
}

全局引入
方法一
上面配置里面有提到
方法二
src/main.js中加入以下
import $ from 'zepto'

非全局引用
在各自的 components模块中加入单独加入以下：
import $ from 'zepto'