近期又看了Vue，目的是配合之前所学的Node进行开发一套完整的Web项目。因为各种原因大数据比赛更改为云计算以及一个单独的大学生软件开发作品赛。再加上年末考试等等花里胡哨的，一个月没有更新博客，主要原因其实是懒得整理学习笔记... 惭愧！
脚手架Vue-cli 的安装
实际上当我们在开发大型的web应用的时候一般都会采用脚手架进行构造一个整体框架。Vue-cli就是一个这样的工具，它可以快速的构建项目。
安装vue-cli
npm install -g @vue/cli 创建项目
vue create name 输入创建项目之后它会让你选择你需要帮你自动下载那些库。使用空格进行选择。一般情况下我们选择Bobel(如果浏览器无法识别ES6语法，这个库会自动转换)以及router(路由)。
细分特性，直接选择第三个。
代码检测，直接回车。没有遇到的基本上都是直接回车。安装完毕之后，cd进入指定目录。 npm run serve或npm run dev 打开项目。
模块化的逻辑
简单的理解
实际上刚创建后我很是头疼，即使是一个初始页面也不知道该如何下手！所以果断采用，挨个删一下看它的作用的方式（笑）。
主要目录在src目录下。
很显然，main.js为入口文件，而通过浏览代码得知，当项目启动后就渲染app.vue到界面。先不管代码的含义，第一任务就是把整体逻辑给整理清楚。
而这个app.vue就是今天的重点。它代表了一个完整的模块化结构。首先template标签包裹着的html为当前模板的html，下面依次是js和css。 这样就组建了一个模块。
一般情况下，我们编写模块都是在src目录下的components目录下进行创建。
值得提醒的是，template中只能存在一个根标签。简单地说，你只能在template中创建一个元素，其他的元素必须存放在这个元素里面。这个是html方面的注意事项。
而我们如何在script中将vue对象实例化，然后对上面的html进行操作呢？这里是需要写在 export default{}之中。但是！你并不需要实例vue这个对象，像上面methods/creted什么什么，你都可以直接在里面进行编写。值得注意的只有data,我们一般写成函数形式，并将数据以return形式返回出去。
export default {
data(){},
methods:{},
created:{}
}这样做的好处是，当你引入很多很多模块的时候，模块中的各种数据不会搞得非常混乱，因为采用return形式数据并不是公开的。
使用模块
然后在要引入的界面js中将对应的模块引入进来。
import 名字 from "./路径"然后在js里添加components参数写上你所名的名称。
export default {
name: 'HelloWorld',
components:{
名字,
}
}只后将这个名字以标签形式使用就成功使用了这个模块。
<名字></名字>