三、vuejs+填坑日记之项目文件认识

《三、vuejs+填坑日记之项目文件认识》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、上一篇博文，我们搭建了一套基础的vuejs的环境，首先安装node.js，然后利用npm包管理器，安装vue-cli，设置淘宝镜像，初始化项目，安装依赖，运行。在这一篇，我们将认识vuejs项目里的各个目录结构。基础项目目录build//编译配置文件，一般不用管

2、-build.js

3、-check-versions.js

4、-logo.png

5、-utils.js

6、-vue-loader.conf.js

7、-webpack.base.conf.js

8、-webpack.dev.conf.js

9、-webpack.prod.con

10、f.js

11、-webpack.test.conf.jsconfig//项目基本设置文件夹

12、-dev.env.js//开发配置文件

13、-index.js//配置主文件

14、-prod.env.js//编译配置文件node_modules//项目依赖包文件夹src//我们的项目的源码编写文件

15、-assets//初始项目资源目录，回头删掉

16、-components//组件目录

17、-HelloWorld.vue//测试组件

18、-router//路由配置文件夹

19、-index.js//路由配置文件

20、-App.vue//APP入口文件

21、-mai

22、n.js//主配置文件static//资源放置目录index.html//项目入口文件package.json//项目依赖包配置文件上面就是vuejs项目初始化后的目录结构，我们一般情况下，只需要关注src和static资源目录就可以了，其它目录大多都是一些配置信息，不需要太费精力的关注。配置SRC目录src

23、-api//接口调用工具文件夹

24、-index.js//接口调用工具

25、-components//组件文件夹，目前为空

26、-config//项目配置文件夹

27、-index.js//项目配置文件

28、-frame//子路由文

29、件夹

30、-frame.vue//默认子路由文件

31、-pages//我们的页面组件文件夹

32、-Index.vue

33、-Content.vue

34、-router//路由配置文件夹

35、-index.js//路由配置文件

36、-style//scss样式存放目录

37、-base//基础样式存放目录

38、-scss//页面样式文件夹

39、-style.scss//主样式文件

40、-utils//常用工具文件夹

41、-App.vue//APP入口文件

42、-main.js//项目配置文件将目录结构按上面的层级配置完成后，不要着急运行项目，这个时候由于删除了一些文件夹，

43、项目是跑不起来的。配置staitc资源目录static

44、-css//放一些第三方的样式文件

45、-font//放字体图标文件

46、-images//放图片文件，如果是复杂项目，可以在这里面再分门别类

47、-js//放一些第三方的JS文件，如jquery对于一些不经常修改变动的css和js咱们统一放到static目录里，因为在src里面的文件，将来每次打包时都会对其进行打包，而文件特别多的情况下，打包会变的特别慢。调整App.vue上面我们进行的是一些目录结构的设置，现在我们对文件进行修改配置，使项目重新运行起来。首先将App.v

48、ue调整成如下代码：@import"./style/style";注意上面使用了lang="scss"，这是因为我们使用了 scss 文件预编译，所以我们要安装scss的npm包。cnpminstallsass

49、-loader-Dcnpminstallnode-sass-D调整Index.vue和Content.vuesrc/pages/Index.vuesrc/pages/Content.vue暂时先写如上代码，后面会对上面代码进行讲解和丰富。调整router路由文件打开src/router/index.js，目前文件是这样的，也是默认的，我们并没有做过任何

50、修改。importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom'@/components/HelloWorld'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',comp