在控制台创建一个简单的vue工程：
在需要放置工程的目录下打开控制台，输入：
vue init webpack test可以创建一个名为test的项目。然后会提示对项目的一些属性进行配置：
Project name | 工程名，不能使用大写 一般直接enter |
Project description | 输入一句话描述这个工程 |
Author | 作者 |
Vue build | 打包方式 直接enter |
Install vue-router | 是否安装路由 选yes |
Use ESLint to lint your code | ESLint是检查代码是否规范的东西，不要选！检查代码跟教导主任一样严格！ 选no |
Set up unit tests | 单选测试 选no |
Setup e2e tests with Nightwatch? | 端到端的测试框架NightWatch 选no |
Shoulder we run | 是否在工程创建后就去跑 npm 安装依赖 选择yes |
创建完后显示的内容为：
创建完工程后，在目录文件下会出现创建好的vue工程：
有两种方式可以启动项目，第一种是在控制台中输入npm命令，另一种是在编译器中运行项目。
第一种：npm启动项目。在控制台中输入：
cd test
npm run dev就可以启动项目了，控制台会显示：
在不关闭控制台的条件下在浏览器中输入：http://localhost:8080，显示为：
第二种，在webstorm中运行项目：
第一次运行项目要编辑一下运行配置：
+号位置加一个npm，然后配置：
Name：随便写
Command：run
Scripts：dev
配置完后运行项目，同样可以得到上面的页面。
Vue的基本框架：
整个工程的目录如下：
文件命名规范：
文件类型 | 文件说明 |
.vue文件 | .vue文件全部大驼峰命名法，仅入口文件index.vue为小写 |
测试文件 | 全部以测试文件名.spec.js 命名 |
资源文件 | 全部小写字母字符命名，由2个以上的词组成，以“-”分割 |
不同文件夹的功能：
文件夹名 | 文件夹功能 |
src | 包含所有的.vue文件 |
build | 存放用于编译用的webpack配置与相关的辅助工具代码 |
config | 三大环境配置文件，用于设定环境变量和必要的路径信息 |
test | 测试文件 |
static | 静态文件 |
dist | npm run build指令下生成的输出文件 |
vue的主要文件：
文件名 | 文件功能 |
main.js | 通过import引入vue.js组件， 创建vue对象的实例 |
index.html | 将vue的实例绑定到一个页面 |
App.vue | 一个组件，表示一个vue组件 |
首先我们存在一个App.vue组件，App.vue中含有</router-view>，路由匹配成功的页面都在这里进行渲染和切换，因此App.vue是我们的主组件。App.vue通过export default 导出组件的名称为App;
Main.js通过import App from './App’语句引入App组件，然后通过new Vue创建vue实例并初始化一些插件。main.js中的el将’#app’挂载到index.html中的
<div id=“app”>中。且用<template>替换。最终将index.html的内容<div id=“app”>的内容替换为<App></App>，而<App></App>就是我们调用App组件的方式。
main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})main.js是整个工程的入口文件，功能是引入各种文件、初始化vue实例和插件；
new Vue是新建一个vue对象；
main.js中的el将’#app’挂载到index.html中的<div id=“app”>中。且用<template>替换。最终将index.html的内容<div>的内容替换为为<App></App>。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test3</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
- index.html是主渲染页面。通过<div id=“app”></div>可以将main.js中初始化的vue对象内容在web页面中显现。
- vue的el项值与index.html中div的id值相同
App.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<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>App.vue是主组件，通过export default 导出组件的名称为App；
所有的页面都是在App.vue下进行切换的;
App.vue中含有<router-view/>，所以路由匹配成功的页面都在这里进行渲染和切换。
App.vue单页组件的构成：
模块名 | 模块内容 |
< template > | 视图模板，包括具体的页面内容 |
< style > | 组件样式表 |
< script > | 组件定义，创建内部访问数据 |
