vue项目搭建准备工作

安装

1. 安装nodejs环境

2. 命令行

npm install -g @vue/cli

3. 创建项目

vue create <project>

4. 安装依赖

cd <project>
npm install

5. 运行项目

npm run serve

---

配置

开发跨域

打开config文件夹下的index.js，在dev键下，配置proxyTable

proxyTable: {
  '/': {
    target: 'http://api.test.com',
    changeOrigin: true,
    pathRewrite: {
      '^/': ''
    }
  }
}

---

操作

组件

1. vue-router

npm i vue-router -S

2. element-ui

npm i element-ui -S

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

3. iview

npm i iview -S

4. vue-resource

npm i vue-resource -S

与jQuery混用

1. 修改build/webpack.base.conf.js

var webpack = require('webpack')

module.exports = {

    // 其他代码...

    resolve: {
        alias: {
            // 'jquery': path.resolve(__dirname, '../static/plugin/jquery/jquery.min'),
            'jquery': 'jquery' 
        }
    },

    //增加一个plugins
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],

    // 其他代码...
}

2. 在main.js引入

import $ from 'jquery'

路由模式

HTML5的History模式
nginx配置：

location / {
    try_files $uri $uri/ /index.html;
}

阿里巴巴图标批量收藏

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
     console.log(span[i].querySelector('span').click());
}