vue新手实战项目--vue-cli的结构分布

了解一下vue-cli项目结构分布

文件结构部分

1.build文件：
是webpack的配置，当我们开始输入npm run dev想要启动项目的时候，首先启动的就是dev-server.js，它主要就是检查node 、npm版本，架子啊配置文件，启动服务

2.config–vue的项目配置

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

3.node_modules–依赖包
这就是项目要用到的依赖包
我们可以在项目加载外部css 利用npm install css-loader
或者说安装插件，就像移动版本的组件库有个轮播插件vue-swiper
或者说安装指定的依赖版本npm install vue-loader@11.1.4

4.src–项目核心文件

5.index.html主页
需要好好了解的这一句话：
在main.js中定义的实例将会挂在到根节点下，内容都会通过vue组件来填充

6.APP.vue --根组件
一个vue页面通常由3部分组成
template
js
style



template只可以有一个父节点#app，并不可以出现跟#app相邻的兄弟节点
标签就是子路由视图，后面的路由页面都显示在这里

7.script
vue通常用es6来写的，用export default导出来。他的下面可以包含数据data，生命周期，方法等。具体语法请看vue.js文档

8.style
默认影响全局，如果只需要部分影响

引入外部文件，先用cmd加上css-loader依赖，npm install css-loader一下回车安装完就直接在这个标签下加上import倒进去css文件就好了

9.main.js 入口文件
主要是引入vue的框架，根组件和路由设置，并且定义vue的实例

10.router 路由配置
router文件夹下有个index.js 就是路由配置文件
path：“/”
component：hello
这里定义了 路径为“/”的路由，该路由对应的页面是hello组件，所以当我们在浏览器url访问的时候http：//localhost：8080/#/时渲染的就是hello组件