Vue cli

安装：npm install -g @vue/cli 

    开始可以先安装默认依赖，熟悉之后可根据自己的需求自定义依赖

创建项目：vue create hello-world

    hello-world 为项目目录名称

在项目目录下开启项目：npm run serve

通过以上命令已经成功构建了一个vue-cli项目，那么接下来，我们来梳理下vue-cli项目的结构

总体框架

一个vue-cli的项目结构如下，其中 src 文件是最重要的一部分，也是我们最需要理解透彻的一部分

框架目录

node_modules ---- 依赖包

public/index.html ---- 整个项目的载体 

src ---- 项目核心文件（我们所写的代码都放在这个文件夹下）

    assets ---- 静态资源（样式类文件，如css，less，sass，以及一些外部js文件）

    components ---- 公共组件

    router ---- 路由（配置项目路由）

    app.vue ---- 跟组件

    main.js ---- 入口文件

.gitignore ---- git上传需要忽略的文件配置

babel.config.js ---- babel编译参数

package.json ---- 项目基本信息（在创建vue-cli项目后自动生成）

README.md ---- 项目说明

文件结构细分

index.html ---- 主页

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充，一般就在title标签下修改标题就OK了

public / index.html

App.vue ---- 跟组件

通常我都会在创建好项目之后去添加路由,命令为  $ vue add router

添加路由之前App.vue的代码是这样的：

模板/js/样式

添加路由之后App.vue的代码是这样的：

模板/样式

main.js ---- 入口文件

main.js

router ---- 路由配置

    router文件夹下的 index.js 即为路由配置文件

router下的index.js

这里定义了路径为 ‘ / ’ 的路由，该路由对应的是Home组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Home组件

类似的，我们可以设置多个路由，‘ /about ’,' /help '之类的，当然首先得引入该组件，再为该组件设置路由