1.目录结构
在用vue-cli4成功创建项目后,项目目录下就多出来很多文件和文件夹,我们对这些文件和文件夹来进行一个基本的认识。
目录 | 说明 |
---|---|
dist | 打包输出目录 |
node_modules | 第三方依赖,我们安装的各种依赖都在个文件件里面,包含vue,vuex,eslint所有的依赖包 |
public | 存放公共资源的地方,里面有一个index.html |
-- index.html | 打包后的入口文件 |
src | 这个是重点,我们的源码以及开发的静态资源等都在里面 |
-- api (默认无) | 所有后台请求 |
-- assets | 静态资源,css、img、js、font等 |
-- compoments | 自定义的公共组件 |
-- icons (默认无) | 项目所有 svg icons |
-- layout (默认无) | 全局Layout |
-- router | 路由配置,用于页面的跳转配置 |
--styles (默认无) | 通常用来存放全局样式 |
-- views | 视图组件 |
-- store (没有加载vuex就没有) | 是vuex的文件,主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。 |
-- utils (默认无) | 通常用来存放全局公用方法 |
-- App.vue | 首页组件(默认组件),也叫根组件 |
-- main.js | 入口文件,一切的入口 |
.browserslistrc | 配置使用CSS兼容性插件的使用范围 |
.eslintrc.js | 配置ESLint |
babel.config.js | 使用一些预设 |
package.json | 项目描述既依赖 |
package-lock.json | 版本管理使用的文件 |
2.文件说明
src/main.js,如果在创建项目的时候,加载了更多的依赖包,例如vuex,store等需要在初始化就加载的,也在main.js中加载
new Vue()就是启动模块,render: h => h(App) 是用来渲染组件的,h()里面可以传入任意想渲染的组件,上面定义了App为./App.vue,那么App.vue就是根组件,$mount('#app)表示挂载的地方,针对的是public目录下/index.html文件中 id为app的对象
import Vue from 'vue' // 指向node_modules\vue目录,第三方依赖就是这种加载
import App from './App.vue' // 加载 App.vue文件,这个是Vue的根组件
import router from './router' // 加载 router目录,这是引用router路由
Vue.config.productionTip = false
// 开始启动
new Vue({
router,
render: h => h(App)
}).$mount('#app')
public/index.html,作为静态文件的入口文件,可以在文件中将系统引用的vue等资源文件,用CDN方式加载进这个文件。还有跨域调用接口时需要用到的JS全局变量,都可以在这个文件中定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue,项目的根组件入口,部分全局用到的Css,Js都可以在这里定义加载。每个vue文件由三部分组成<template></template>,<srcipt></script>,<style></style>。
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
src/route/index.js,用来存放所有组件的路由,路由之间可以通过children来嵌套,也可以通过redict跳转,各组件之间的关系,基本都是通过这个router来实现。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
注:
参考资源