Vue.js系列之项目结构说明

Vue.js系列之项目结构说明_第1张图片

1.build——[webpack配置]

build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是dev-server.js,它会去检查node及npm版本,加载配置文件,启动服务。

Vue.js系列之项目结构说明_第2张图片

2.config——[vue项目配置]

config文件主要是项目相关配置,我们常用的就是当端口冲突时配置监听端口,打包输出路径及命名等

3、index.html——[主页]

index.html如其他html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充

4、App.vue——[根组件]

【template】

其中模板只能包含一个父节点,也就是说顶层的div只能有一个(例如下图,父节点为#app的div,其没有兄弟节点)

是子路由视图,后面的路由页面都显示在此处

打一个比喻吧,类似于一个插槽,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示

5、main.js——[入口文件]

main.js主要是引入vue框架,根组件及路由设置,并且定义vue实例,下图中的

components:{App}就是引入的根组件App.vue

后期还可以引入插件,当然首先得安装插件。

(完)

 

你可能感兴趣的:(Vue.js系列之项目结构说明)