脚本宝典收集整理的这篇文章主要介绍了做一个VUE项目(三 vue--项目结构梳理),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue pychatm创建项目 点击这里查看 Pycharm创建的初始vue项目会有一个hello word界面,运行后如下所示
文件结构如下
删除后的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界面如下
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+回车,出现下面窗口,点击安装即可
安装后波浪号消失打开main.js在第6行敲下回车,填入下面代码
router,
pycharm 爆红提示我们没有导入router, 按住ctrl+alt+回车,导入router 成功导入
继续打开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+回车,安装 安装完成后如下图即为正常
没成功的多试几次在项目根目录新建 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": ""
}
}
}
},
}
以上是脚本宝典为你收集整理的做一个VUE项目(三 vue--项目结构梳理)全部内容,希望文章能够帮你解决做一个VUE项目(三 vue--项目结构梳理)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。