Vue.js实战笔记Day1（vue-cli）

最近要弄一个单页面应用，于是乎就想到了vue.js，但网上关于vue.js的教程都是一些简单的数据互相绑定demo，所以最后买了慕课网的实战教程学习，同时结合 《官方文档》 以下是我的学习笔记。

1 Vue-cli 简介与安装

通常创建一个项目，一般的玩法都是会把一些基本的代码写好，类似于建筑工人在构建房子是都会搭建脚手架，而Vue就提供 Vue-cli 脚手架，作用是帮助编写基础代码，它具体到能帮助我们搞掂：

• 目录结构
• 本地测试
• 代码部署
• 热加载
• 单元测试

进入 Vue-cli github地址，查看 readme，可以知道它的安装方法。
在终端中输入以下命令用以全局安装 Vue.cli

npm install -g vue-cli

安装完之后，可以输入以下命令，用以生成 Vue-cli 脚手架

vue init <template-name> <project-name>

其中 <template-name> 是指模板名字，比如六个官方模板：

• webpack
• webpack-simple
• browserify
• browserify-simple
• pwa
• simple

webpack，browserify，seaJs，requireJs 都是 JS模块化的方案，其中seaJs，requireJs属于同一类，都同为在线编译模块方案；而webpack，browserify属于同一类，都同为预编译模块方案。

• seajs / require : 是一种在线”编译” 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
• browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。
• 而Gulp和Grunt是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。

具体生成的模板内容可移步到github网址上查看，比如此教程项目所用的webpack模板，其生成的模板内容就是：full-featured Webpack + vue-loader setup with hot reload , linting , testing + css extraction（当然也可以使用自定义模板）
而 <project-name> 顾名思义就是所做项目的名称了，eg：

vue init webpack sellapp

在创建完这个基本脚手架，我们还需要为其添加一些 node 代码库用以项目依赖，此时进入项目所在目录，执行 npm install 命令：

npm install

过后可以发现除了模板生成的文件外还生成了 node_modules 文件，最后运行 npm run dev 命令，用以搭建本地服务器运行项目：

npm run dev

2 Vue-cli 文件目录说明

经过初步的安装部署，此时的项目文件目录应该含有以下文件：

其中：

• build 和 config 文件为 webpack 配置相关的文件
• node_modules 为项目依赖 node 代码库
• src 为项目源码存放的地方
• static 为第三方静态文件存放的地方
• .babelrc 文件为 baber 的设置文件，用于将ES6编译成ES5（具体的存放代码就是存放在 node_modules文件代码库中）
• editorconfig文件顾名思义就是一个设置编辑器编写格式的文件，如使用 sublime 编辑器，需要安装 EditorConfig 插件，具体关于 editorconfig ，可以参考这两篇文章，《EditorConfig介绍》以及《SublimeText插件推荐：代码格式管家-EditorConfig》
• eslintrc.js文件是 eslint 的配置文件，主要就是编码风格问题，具体规则问题可以参考《Eslint 规则说明》 这篇文章
• index.html 文件是项目入口文件
• package.json 文件是项目配置文件，用于描述一个项目

3 项目运行

根目录中的 index.html 是项目入口文件，即整个项目最后生成的页面（它的 css ， js 会动态地插入），而这页面的主入口 js 文件位于 src 目录下的 main.js ，在初始化Demo展示中，可以看到它从 src/compenent 引入 Vue 组件（.vue 文件）进行拼接从而初始化一个 Vue 实例。
一个 Vue 组件的编写有三个板块，分别是：
- <template>
- <script>
- <style>：添加 scoped 属性，用于限制该 CSS 规则只对该组件有效

编写好一个组件后，在 <script> 中通过 export default 定义形式，去作为一个组件的导出。
而当要使用这个组件时，需要先引用该组件，然后使用以下形式进行组件注册

export default {
    compenent: <templateName>
}

4 模拟后台数据

参考文章 《VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js》