从零创建vue+elementui+sass+three.js项目

安装vuecli

npm install -g @vue/cli

初始化：

vue init webpack projectname

发生如下图的不可用的话尝试vue create chatrobat

发生如下图的不可用的话，是因为 Vue CLI 3+ 移除了 vue init 命令，改用 vue create projectname。
若仍想使用 vue init（比如为了兼容旧项目），需要用命令行npm install -g @vue/cli-init安装 @vue/cli-init 插件

create成功后：

cd projectname

npm install

支持sass:

npm install sass --save-dev
npm install sass-loader@7.1.0 --save-dev
npm install node-sass@4.12.0 --save-dev

build/webpack.base.conf.js添加

rules: [
		...,
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
     ]

安装three.js:

npm install --save three@0.128.0

安装GUI

npm install dat.gui

安装elementui:

npm i element-ui -S

安装vuex:

npm install vuex@3.1.0 --save

main.js初始化：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store';

Vue.config.productionTip = false

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

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vuex初始化(src/store/index.js)：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    position: { x: 0, y: 0, z: 0 },
    rotation: { x: 0, y: 0, z: 0 },
    scale: { x: 1,y: 1,z: 1 }
}
const mutations = {
    SET_POSITION:(state, data) => {
        // console.log('SET_POSITION', state, data);
        state.positon = data;
    },
    SET_ROTATION:(state, data) => {
        // console.log('SET_ROTATION', state, data);
        state.rotation = data;
    },
    SET_SCALE:(state, data) => {
        state.scale = data;
    }
}
const actions = {

}
const store = new Vuex.Store({
    state,
    mutations
});
export default store

vue-router(src/router/index.js):

import Vue from 'vue'
import Router from 'vue-router'
import loginfrom '@/components/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    }
  ]
})

安装axios

npm install --save axios@1.5.0

axios请求封装：（src/utils/request.js中）

import axios from 'axios'
import store from '@/store'

// create an axios instance
const createService = (url, timeout) => {
  const service = axios.create({
    baseURL: url, 
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: timeout // request timeout
  })
  // request interceptor
  service.interceptors.request.use(
    config => {
      // do something before request is sent
      // if (store.state.token) {
      //   // let each request carry token
      //   config.headers['XAUTH'] = store.state.token
      // }
      return config
    },
    error => {
      // do something with request error
      console.log( error) // for debug
      return Promise.reject(error)
    }
  )

  // response interceptor
  service.interceptors.response.use(
    /**
     * If you want to get http information such as headers or status
     * Please return  response => response
     */

    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    async response => {
      const res = response.data
      if (!res.code) {
        // 单独判断没有code 设备支持导出
        return res
      }
      if (res.code !== 200 && res.code !== 20000 && res.code !== 0) {
        return Promise.reject(new Error(res.message || 'Error'))
      } else {
        return res
      }
    },
    error => {
      console.log('err' + error) // for debug

      const response = {
        code: null
      }
      console.log('响应拦截器', error.response)

      if (error && error.response && error.response.status) {
        response.code = error.response.status
        response.config = error.response.config
      }

      if (response.code === 401) {
      } else {
      }

      return Promise.reject(error)
    }
  )
  return service
}
export const mainRequest = createService('http://192.168.2.157:11004', 60000);// 主服务
export const speechRequest = createService('https://aitrainer-t.alva.com.cn', 60000) 

api请求 (src/api/persion.js)：

import { mainRequest } from '../utils/request'
export const getToken = (data) => {
    return mainRequest({
        url: `/api/speech/tokenApi/token`,
        method: 'get',
        params: data
    })
}

vue组件中使用请求

import { getToken } from '@/api/perssion';
...

axios不使用封装直接用

import axios from 'axios';
// const baseUrl = 'http://192.168.2.157';
const baseUrl = 'http://helibrary.alva.com.cn:9100';
let projectCode;
export const getTreeList = () => {
    return new Promise((resolve, reject) => {
        axios({
            url: baseUrl + '/bookSearch/api/renderProSourceArchyT/getTreeList',
            method: "post",
        }).then(res => {
            projectCode = res.data.result.length && res.data.result[0].proId || '';
            resolve(res)
        }).catch(function (err) {
            reject(err)
        });
    });
};

打包后找不到js，css
全局搜索assetsPublicPath

打包后elementui的icon丢失问题（去掉limit限制）：

打包后style设置的背景图片找不到的问题：
1.build/webpack.prod.conf.js做如下修改

2. build/utils.js做如下修改