vue專案初始化

vue pychatm創建專案點擊這里查看
pycharm創建的初始vue專案會有一個hello word界面,運行后如下所示

檔案結構如下

1. 洗掉App.vue中不屬于我們需要的部分

洗掉后的App.vue

<template>
 <div id="app"></div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>

</style>

在div中添加路由占位符

<div id="app">
<router-view></router-view>
</div>

整理完成的App.vue如下

<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>

</style>

此時vue界面如下
在這里插入圖片描述

2. 洗掉components中的不屬于我們的組件

在這里插入圖片描述

3.在src目錄下添加檔案夾router

在這里插入圖片描述

4.0 在router目錄下添加index.js

在這里插入圖片描述
在index中添加路由管理,代碼如下

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
    routes
})

export default router

在vue-router下有波浪線,說明我們沒有安裝模塊,按住ctrl+alt+回車,出現下面視窗,點擊安裝即可
在這里插入圖片描述
安裝后波浪號消失

5.0 匯入使用router

打開main.js在第6行敲下回車,填入下面代碼

router,

在這里插入圖片描述
pycharm 爆紅提示我們沒有匯入router,
按住ctrl+alt+回車,匯入router

成功匯入

6.0 匯入elment-ui

繼續打開main.js,
在

Vue.config.productionTip = false

前面空白處匯入elmentui,同事引入比較常用的訊息提示框,Message,MessageBox

import ElementUI, {Message, MessageBox} from 'element-ui'


//配置 this.$message參考Message
Vue.prototype.$message = Message
//配置 this.$$confirm參考MessageBox.confirm
Vue.prototype.$confirm = MessageBox.confirm
Vue.use(ElementUI)

同樣pycharm 爆紅,提示我們沒有安裝,直接快捷鍵安裝
按住ctrl+alt+回車,安裝
安裝完成后如下圖即為正常
在這里插入圖片描述
沒成功的多試幾次

7.0 配置開發環境跨域

在專案根目錄新建 vue.config.js,如下圖
在這里插入圖片描述
前后端分離后后端和前端不在同一埠或者同一域名將存在跨域,現設定vue埠為8000,后臺埠為8080,轉發規則,所有代碼/api的url都轉發到8080埠去,配置如下
,在 vue.config.js配置如下轉發

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080',
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/337720.html

標籤：其他

上一篇：PHP陣列排序匯總

下一篇：Nodejs 下載安裝步驟（Windows環境）

做一個VUE專案(三 vue--專案結構梳理)