提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

前言

提示：這里可以添加本文要記錄的大概內(nèi)容：

前端環(huán)境 Hbuider x + elementui
轉(zhuǎn)發(fā) nginx
后臺(tái)環(huán)境 springcloud

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、環(huán)境是什么？

示例：構(gòu)建代碼的土壤

二、使用步驟

1.前臺(tái)搭建方式

1.創(chuàng)建項(xiàng)目

2.目錄結(jié)構(gòu)

3. 安裝elementui

npm i element-ui -S

導(dǎo)入

import Vue from 'vue'
import App from './App.vue'
/* 使用elementUI組件 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/* 引入路由，才能使用，記得在下面的new Vue里注冊(cè)這個(gè)路由 */
import router from './router/router.js'

4. 創(chuàng)建路由

安裝路由

npm install 

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
 
Vue.use(Router)
 
export default new Router({
	routes: [
		{path: '/',component:Welcome},
		{path: '/home',component:Home},
	]
})

5.使用axios

npm install axios 

在根目錄配置

和路由配置相同，在需要的時(shí)候直接引入

6.bug記錄

cess to XMLHttpRequest at 'http://localhost/sockjs-node/info?t=1683340460770' 
from origin 'http://manage.leyou.com' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested resource.

6.1出現(xiàn)跨域問題

6.2 解決方式

6.2.1 創(chuàng)建vue.config.js

// 假設(shè)要請(qǐng)求的接口是：http://40.00.100.100:3002/api/user/add
module.exports = {
    devServer:{
      host:'localhost',  // 本地主機(jī)
        port:5000,  // 端口號(hào)的配置
        open:true,  // 自動(dòng)打開瀏覽器
        proxy:{
          '/api': {   //  攔截以 /api 開頭的接口
            target: 'http://40.00.100.100:3002',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
            changeOrigin: true,    //這里true表示實(shí)現(xiàn)跨域
            secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
            pathRewrite: {
              '^/api':'/'  //這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/api/user/add'，直接寫‘/api/user/add’即可
            }
          },
    // 假如又有一個(gè)接口是：http://40.00.100.100:3002/get/list/add
    // 那就再配置一個(gè) get的，如下：
          '/get': {   //  攔截以 /get 開頭的接口
            target: 'http://40.00.100.100:3002',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
            changeOrigin: true,    //這里true表示實(shí)現(xiàn)跨域
            secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
            pathRewrite: {
              '^/api':'/'  //這里理解成用‘/api’代替target里面的地址，
            }
          }
			// 調(diào)用的時(shí)候直接  /get/list/add  就可以了
        }
    }
  }

  // 注意：修改了配置文件后一定要重啟才會(huì)生效;

參考鏈接解決跨域問題

7.bug記錄

ient:169 Invalid Host/Origin header e

出現(xiàn)問題是利用nginx做了反向代理必須在vue中允許反向代理

disableHostCheck: true, //允許反向代理

總結(jié)

提示：這里對(duì)文章進(jìn)行總結(jié)：
例如：以上就是對(duì)前端項(xiàng)目創(chuàng)建文章來源地址http://www.zghlxwxcb.cn/news/detail-435599.html

到了這里，關(guān)于項(xiàng)目創(chuàng)建第一天 搭建前端環(huán)境的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！