使用vue初建项目

2017-05-04

本文所有操作都是基于已安装好Node.js和Git命令行的前提下进行的。
接触vue框架时间不长，但仍对Vue.js一知半解的，就算看了官方文档也是千头万绪，无从下手，所以我想在此博客下慢慢梳理自己的学习vue经历和知识点。

如何创建一个vue项目

1	$ npm install -g vue-cli

首先使用vue-cli（vue脚手架工具）搭建一个基本的代码结构

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

比如vue init webpack eleme 用webpack来创立一个项目名为eleme的项目
随后会自动跳出一些信息需要Author自己输入，包括：
项目名、项目描述、作者、eslint（代码风格检查器）、eslint preset（风格预设）：standard、Karma+Mocha(单元测试库)：No、e2e test：No

进入项目目录下后

1	$ npm install

安装依赖，可发现目录下多了node_modules文件夹

1	$ npm run dev

以上命令可运行该初始项目，默认在8080端口启动，在浏览器输入localhost：8080可查看页面。

Vue 基础知识

入口文件是index.html，body里有<app>或<div id=”app”> 为vue的组件，入口js为main.js
其中用 new Vue已经实例化vue实例，并且el显示挂载到body上
每个组件分为三部分：<template>, <script>,<style>

添加组件的步骤

在components目录下创建一个vue文件，在<script>用export default导出一个对象
在APP.vue里import引用刚刚导出的对象，用components： {注册组件}=>然后再HTML标签引用

项目文件介绍

build和config文件夹——webpack打包环境配置相关
node_modules——通过npm install 安装的依赖代码库
src——存放项目源码
static——存放第三方静态资源
.babelrc——将es6转为es5的配置
package.json——配置文件，依赖等。devdependence表示编译过程中的依赖。

其他

App.vue大组件可以包含header子组件及各导航组件
webpack——当前最火的前端构建工具