vue从入门到实战（1）

前言

学习vue也有一段时间了，用vue开发过几个项目。为了帮助自己加深对vue的理解，准备开始写一套关于vue的从入门到实战的教程。

vue是什么？

vue是一套用于构建用户界面的渐进式框架，vue的核心层只关注视图层。采用了mvvm的方式，实现了数据的双向绑定。

安装vue

安装vue之前，你需要先安装nodejs。我们这里直接使用vue-cli脚手架来创建vue基础项目。在nodejs安装成功的情况下，可以使用npm命令安装vue-cli。我们这里直接在命令行运行npm install -g @/vue-cli，然后回车。等安装成功后，在命令行中执行vue --version查看当前vue-cli的版本，如果能看到版本号，则说明vue-cli已经安装成功了。

使用vue-cli创建一个vue项目

使用命令行进入到工作目录后，运行vue create hello-world 其中hello-world是我的项目名。然后按回车健，进入到

我们就选默认的吧，继续回车。这个时候vue-cli脚手架就开始帮你初始化项目了。

出现这个的字样就表示你的项目已经初始化好了（我这里有点乱码，不过没关系），按照提示cd hello-world进入到我们的项目中，然后运行npm run serve

打开浏览器，在地址栏输出localhost:8080看看项目运行结果吧

项目目录结构

现在初始化完成后，使用我们喜欢的编辑器（我比较喜欢使用vs code）打开我们刚使用vue-cli初始化好的项目

|-node_modules      // 下面放的是我们使用npm下载的依赖
|-public            
    favicon.ico       
    index.html
|-src               // 项目开发环境，我们写的组件，页面都放在这个目录下面
    |-assets        // 静态资源文件夹，一般放图片、css
    |-components    // 组件文件夹
    App.vue         // 
    main.js         // 核心配置文件，一般会在文件中引入全局配置文件
.gitignore          // git忽略提交
babel.config.js
package.js          
README.md           // 项目说明文件