Vue2+VueRouter2+webpack 构建项目实战（二）：目录以及文件结构

前端开发作者： 2024-08-20 20:25:01

通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战（一）：准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇文章详细介绍下项目的结构。项目目录以及文件结

目录/文件	说明
build	这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。
config	配置目录，默认配置没有问题，所以我们也不用管
node_modules	项目开发依赖的一些模块
src	开发目录（绝大多数工作都是在这里开展）
static	资源目录
test	初始测试目录，没用，删除即可
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
index.html	首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头
package.json	项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。
README.md	不用管

<template>
  div id="app">
    img src="./assets/logo.png"router-view></</div>
>

script>
export default {
  name: 'app
}
style
#app {
  font-family: 'Avenir',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px;
}
>

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',router,template: '<App/>'
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default  Router({
  routes: [
    {
      path: '/'

文件目录	说明
component	组件文件夹我们写的一些公用的内容可以放在这里的。
config	核心配置文件夹
frame	存放自路由的文件夹
page	项目模板文件夹,所有的页面文件全部存放与此，后面会根据需要来建立各种子目录
style	样式存放目录