网络上已经有很多关于学习vue的资源和内容，官方文档更是给出了大量的知识点和使用方法给我们提供学习，可是学习归学习，如果这些内容没有应用到实际的开发当中，那也是没有什么用途的，因为工具之所以为工具，是因为在你不断的使用中，有自己的思考，有自己的判断，有自己去探索的空间。
好了，废话不多说了，下面我们来看一下官方给予的一个定义：
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
有兴趣的同学可以详读官方文档，我们这里只是从入门讲解vue的一些基本操作和功能。
一、安装
安装有几种方式，官方推荐学习的过程中不要用脚手架去搭建项目。
1.我们可以通过最简单的<script> 进行引入
2.命令行工具 (CLI)
这两种方式都非常简单，不再详细讲解，npm的源最好是换成国内的镜像，要不然下载的速度简直感人肺腑。至于安装node.js有问题的同学，可以给我留言，因为本人在安装的过程中也遇到很多问题，比如node和npm的版本不一致造成了很多error，卸载卸载不干净， 安装又又冲突等等问题。但是同学们千万不要在这里就被拦住了，只是一开始安装环境有些困难，后面就真的没有什么问题了。
搭建好手脚架以后，可以根据以下命令：
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建项目， 项目名字叫做my-project
$ vue init webpack my-project
# 进入项目，然后安装依赖
$ cd my-project
$ npm install
# 运行项目，请不要关闭当前窗口
$ npm run dev
在init的过程中会出现下面内容让你选择填写：
? Project name test
? Project description 我的第一个项目
? Author caijunyu <vshiron@163.com>
? Vue build standalone
? Install vue-router? Yes （路由）
? Use ESLint to lint your code? No （语法检查）
? Setup unit tests with Karma + Mocha? Yes （单元测试）
? Setup e2e tests with Nightwatch? (Y/n) y
以上要注意是的Use ESLint to lint your code这个选中就选择no就行了，其他的确认确认确认即可。eslint算是一个代码语法规范检查的工具，不同意就不会把检查语法规范的功能加进webpack编译的流程里
注意：使用npm下载模块出错的话，最好还是安装一下国内镜像，使用cnpm来下载吧。据说用cnpm下载的内容会有所缺失，但是如果用npm下载了半个小时都搞不定的话你还是放弃它吧。我使用的过程中暂时是没有什么功能缺失的。
安装完成后欢迎使用 **npm run dev **启动项目 ；）
见到如下界面便是安装完成：
welcome.png
二.初步了解你的项目结构
基础目录结构
我们先来看看最原始的目录结构吧！
image.png
主目录下面有着几个大目录，我们初学阶段主要关注的是
- src目录，因为大部分的内容都是围绕这个目录进行的
- build是webpack配置文件
- config是配置目录，包括端口号等
- node_modules是项目依赖模块
- static是静态资源文件
- package.json是整个项目配置文件
- index.html算是一个页面的入口文件，可以在这里配置html的基本信息
随着项目的不断扩展，我们会修改目录的结构以适应开发需求
src下的目录结构
下面，我们可以再看看src目录下面有什么内容：
- assets为一些资源文件的目录
- components是基础的组件或者视图
- router可以设置路由，即完成单页面切换的效果
- app.vue 是一个主体的入口，一切从这里开始
- main.js 属性其他语言开发的同学会知道，每个程序都有一个主入口，main可以配置一些核心文件和信息
app.vue文件内容的组成
下面再讲解一下app.vue这个文件
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
我们可以看到，其实这里主要由三大模块组成，第一个模块是：<template>，第二个是：<script>，第三个是：<style>。<style>很简答，其实就是相对于html中是css图层样式，如果不是很理解的同学可以回去看看这部分的内容，主要是修改一些样式。
template翻译上就是模板的意思，我们可以把它也理解成一个印章，即使一个印章，实际上是可以反复使用盖出很多个图形。
而我们的script中则定义了，我们这个印章要盖的内容，比如印章上需要有标题，我们就可以在data里面返回印章的标题是什么，让印章自动渲染上数据。上面显示的是export default {name: 'app'}，这是是给这个模板命名为app,接下来我们要处理的数据则是在data里面进行绑定。后面我们会再详细讲解这部分的内容。
main.js中的内容组成
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
引用官方文档中的一句话来描述就是：每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
这个文件里面其实就是构造了一个最基础，作为整个应用程序根基的vue对象。相对于iOS来说，我个人理解这个就是一个window对象，可以挂载显示其他内容。
三，尝试修改界面内容
现在我们已经看到了有一个主界面，地址栏是：localhost:8080/#/
image.png
实际上它对应的就是一个hello.vue的页面。刚刚不是提及了app.vue的文件结构吗？其实这个界面的目录结构也是相似的，只不过内容可能会比较偏多而已。
单纯的学习没有看到效果是非常无聊的，那么我们下面来尝试改变一下代码，看看会有什么效果吧。我相信大部分学了html+css的同学都能自己手动的把界面构建出来，那么我们来看看，这代码里面有什么特别之处呢。
image.png
在写着msg的地方并没有显示
{{msg}}这样的内容，而是被替换成了script里面的一段内容：msg: 'Welcome to Your Vue.js App'这里就实现了模板（template）中的内容和script中data的msg进行了绑定。我们把没有必要的内容先删除以便观察：
image.png
image.png
（logo是配置中app.vue中）
在我们删除了主题下面的内容后，我们的界面已经立刻刷新了。实际上我们在这里可以修改data中msg的内容，也可以立刻在界面上刷新。
export default {
name: 'hello',
data () {
return {
msg: 'hello vue!'
}
}
}
这是一个vue的最简答架构，export default我的理解有一种”导出“的味道（输出该部分内容），在其他界面如果需要用到你的这个部分的时候，在直接import该组件的时候，大括号里面的内容会被‘’引入''，后面再理解，我们这里手写就体会一下，怎么样输出data中的数据，这个data是需要用return来返回每一项属性的内容的。
目前为止，我们的项目已经跑起来了，本节的主要内容就是学会怎么样构建项目，理解基础目录结构，了解xxx.vue的大概样式。
好了，大家先去把最基础的原型构建出来吧。
网友评论