Vue-Cli 项目文件结构分析
在上一小节中,我们介绍了 Vue-Cli 初始化项目,本小节我们一起来分析以下 Vue-Cli 创建项目的结构。
首先我们先看以下用 Vue-Cli 创建项目的整体结构:
Vue-Cli 给我们提供了认的项目结构,当然你并不是一定要按照这个结构来编写项目,你完全可以根据项目的需要或者个人喜好对项目结构加以改写。
我们打开之前通过脚手架创建的项目,在项目的根目录下运行:
npm run serve
出现界面后:
可能,同学们对这样项目结构还不是很熟悉,接下来,我们将对主要的几个项目详细分析。
打开 main.js 入口,我们可以看到这段:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
我们通过 import 引入了 App 组件、VueRouter 配置 router、Vuex 配置 store。
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
通过 new Vue () 创建 Vue 实例,并将 router、store 配置传入。通过 render 渲染组件 App。并将 Vue 实例挂载到 id 为 app 的 div 上。
打开 router/index.js ,我们可以看到路由配置信息:
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import( "../views/About.vue")
}
];
定义了两个路由:
打开 store/index.js ,我们可以看到 Vuex 的配置信息:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
在本小节我们介绍了脚手架根据初始化项目的结构。