上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行。在这一篇,我们将认识vuejs项目里的各个目录结构。
基础项目目录
- build // 编译配置文件,一般不用管
- |-build.js
- |-check-versions.js
- |-logo.png
- |-utils.js
- |-vue-loader.conf.js
- |-webpack.base.conf.js
- |-webpack.dev.conf.js
- |-webpack.prod.conf.js
- |-webpack.test.conf.js
- config // 项目基本设置文件夹
- |-dev.env.js // 开发配置文件
- |-index.js // 配置主文件
- |-prod.env.js // 编译配置文件
- node_modules // 项目依赖包文件夹
- src // 我们的项目的源码编写文件
- |-assets // 初始项目资源目录,回头删掉
- |-components // 组件目录
- |-HelloWorld.vue // 测试组件
- |-router // 路由配置文件夹
- |-index.js // 路由配置文件
- |-App.vue // APP入口文件
- |-main.js // 主配置文件
- static // 资源放置目录
- index.html // 项目入口文件
- package.json // 项目依赖包配置文件
上面就是vuejs项目初始化后的目录结构,我们一般情况下,只需要关注src和static资源目录就可以了,其它目录大多都是一些配置信息,不需要太费精力的关注。
配置SRC目录
- src
- |-api // 接口调用工具文件夹
- |-index.js // 接口调用工具
- |-components // 组件文件夹,目前为空
- |-config // 项目配置文件夹
- |-index.js // 项目配置文件
- |-frame // 子路由文件夹
- |-frame.vue // 默认子路由文件
- |-pages // 我们的页面组件文件夹
- |-Index.vue
- |-Content.vue
- |-router // 路由配置文件夹
- |-index.js // 路由配置文件
- |-style // sCSS 样式存放目录
- |-base // 基础样式存放目录
- |-scss // 页面样式文件夹
- |-style.scss // 主样式文件
- |-utils // 常用工具文件夹
- |-App.vue // APP入口文件
- |-main.js // 项目配置文件
将目录结构按上面的层级配置完成后,不要着急运行项目,这个时候由于删除了一些文件夹,项目是跑不起来的。
配置staitc资源目录
- static | -css // 放一些第三方的样式文件
- | -font // 放字体图标文件
- | -images // 放图片文件,如果是复杂项目,可以在这里面再分门别类
- | -js // 放一些第三方的JS文件,如 jquery
对于一些不经常修改变动的css和js咱们统一放到static目录里,因为在src里面的文件,将来每次打包时都会对其进行打包,而文件特别多的情况下,打包会变的特别慢。
调整App.vue
上面我们进行的是一些目录结构的设置,现在我们对文件进行修改配置,使项目重新运行起来。首先将App.vue调整成如下代码:
- <template>
- <div id="app">
- <router-view></router-view>
- </div>
- </template>
- <script>
- export default {
- name: 'app'
- }
- </script>
- <style lang="scss">
- @import "./style/style"; <!--在这里我们直接导入主样式文件-->
- </style>
注意上面使用了lang="scss",这是因为我们使用了 scss 文件预编译,所以我们要安装scss的npm包。
- cnpm install sass-loader -D
- cnpm install node-sass -D
调整Index.vue和Content.vue
src/pages/Index.vue
- <template>
- <div>index page</div>
- </template>
src/pages/Content.vue
- <template>
- <div>content page</div>
- </template>
暂时先写如上代码,后面会对上面代码进行讲解和丰富。
调整 router 路由文件
打开src/router/index.js,目前文件是这样的,也是默认的,我们并没有做过任何修改。
- import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'
- Vue.use(Router)
- export
- default new Router({
- routes:
- [{
- path:
- '/',
- name: 'HelloWorld',
- component: HelloWorld
- }]
- })
调整为如下代码:
- import Vue from 'vue'
- import Router from 'vue-router'
- import Index from '@/pages/Index'
- import Content from '@/pages/Content'
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path: '/',
- component: Index
- },
- {
- path: '/Content/:id',
- component: Content
- }
- ]
- })
上面的/就是默认的意思,这里默认显示我们的Index.vue,而大家可能会对Content/:id有疑问,因为咱们做的是一个列表,然后点击列表中具体的某一条,就进入到了内容页面。而:id就是vuejs路由的动态路由配置。我们用id来区分显示不同的内容。
上些工作做完, 我们的项目就基本配置好了,这个时候来启动我们的项目
- cnpm run dev
当出现上图,则表示启动成功,如果有ERROR则表示失败,请仔细检查上面的各个文件的内容是否书写有错。启动成功我们打开浏览器,输入http://localhost:8080,如果看到以下界面,则说明和我的项目是一样的。
本篇文章大部分内容摘抄至FungLeo博客,忠心感谢FungLeo,是你们无私的奉献,才让我们有了学习的参考,以下是地址:
http://blog.csdn.net/FungLeo/article/details/77585205
来源: http://www.cnblogs.com/xinhudong/p/7843532.html