Vue 初始化

vue-cli 初始化

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g vue-cli

vue init webpack demo

cd demo

cnpm i

npm run dev

UI 框架（element-ui）

npm i element-ui

// main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

HTTP 库（axios）

npm i axios

// main.js

import axios from 'axios'
Vue.prototype.$http = axios // this.$http()

HTTP 库-跨域（vue-jsonp）

npm i vue-jsonp

// main.js

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp) // this.$jsonp()

CSS 预处理（less）less-Loader 注意版本大于5可能会运行报错，建议 npm i less-loader@4.1.0

npm i less less-loader

// webpack.base.conf.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
      }
    ]
  }
}

jQuery

npm i jquery –D

// webpack.base.conf.js

const webpack = require('webpack')
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

打包

// /config/index.js

module.exports = {
  build: {
    productionSourceMap: false
  }
}

// package.json

{
  "scripts": {
    "report": "npm run build --report"
  }
}

npm run report

内网 IP 访问

/config/index.js

module.exports = {
  dev: {
    host: '0.0.0.0'
  }
}

http://192.168.7.146:8080/

 https://gitee.com/senjer/vue-demo.git