Vue搭建后台管理前端目录详解

1.我们只需要打开终端,进入项目目录,输入:npm install命令,即可安装这些依赖

2.在package.json文件中有scripts启动脚本配置,可以输入命令:npm run dev或者npm start

  • index.html:html模板文件。定义了空的div,其id为app

  • main.js:实例化vue对象,并且通过id选择器绑定到index.html的div中,因此main.js的内容都将在index.html的div中显示。main.js中使用了App组件,即App.vue,也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后,就拥有了vue的内容(包括组件、样式等),所以,main.js也是webpack打包的入口

  • index.js:定义请求路径和组件的映射关系。相当于之前的<vue-router>

  • App.vue中也没有内容,而是定义了vue-router的锚点:<router-view>,我们之前讲过,vue-router路由后的组件将会在锚点展示。

  • 最终结论:一切路由后的内容都将通过App.vue在index.html中显示。

  • 访问流程:用户在浏览器输入路径,例如:http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件,并把该组件渲染在index.html文件中(id为“app”的div中)

    扫描二维码关注公众号,回复: 10274099 查看本文章

发布了52 篇原创文章 · 获赞 74 · 访问量 6355

猜你喜欢

转载自blog.csdn.net/qq_39182939/article/details/105011508
今日推荐