vue init

Posted 2020-12-21 senjer

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 -S

// 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

Vue.prototype.$http = axios // this.$http()

HTTP库-跨域（vue-jsonp ）

npm i vue-jsonp

// main.js

Vue.use(VueJsonp) // this.$jsonp()

CSS 预处理（less）

npm i less less-loader
npm i less -g

// main.js

import less from ‘less‘

// 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‘
    })
  ]
}

// main.js

import $ from ‘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/