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》