vue使用理解（1）

vue创建项目，使用，理解。
1.搭建环境
需要node.js然后安装相关依赖，安装全局vue-cli
说明：默认环境已经搭建完成
2.创建项目
1.cmd选择路径（你要放置项目的位置）
2.cmd里输入vue init webpack hpTest（hpTest是你自己创建的项目名）
3.项目选项见下图
重点：Install vue-router？选项一定要选择y（不选后期要配置vue-router相关项。）
说明：下图中的是未选择的，为了简化问题，本人又重新建了一个项目，选择了vue-router，后续将以安装vue-router的项目说明。如果愿意可以新建两种项目，对比目录结果的异同。

3.安装依赖
1.cd到你的项目下面
2.cmd中输入cnpm install
说明一下npm install和cnpm install 都是安装依赖包，npm服务器在国外，下载太慢。利用cnpm install下载淘宝提供的。两者功能一样，使用其中一个命令即可。

4.测试项目是否搭建成功
1.在cmd中输入npm run dev
见下图

2.启动成功在浏览器会出现对应界面

以上只是流程介绍，有问题自行百度。

项目开发工具本人使用Visual Studio Code（自行解决）

项目目录结构见下图

问：运行npm run dev后，过程中读取了哪些文件，经过了哪些步骤后，最终访问到入口文件？
答：使用vue.js官网提供的脚手架工具并沿用默认配置的话，你执行npm run dev的时候会出来页面，是因为你根目录下的package.json文件里script配置了”dev”: “node build/dev-server.js”，然后读取这个文件，通过里面的配置继续读取文件最后到达main.js这个入口文件
具体过程如下package.json>dev-server.js>webpack.dev.conf>webpack.base.conf(在这个文件中配置了app: ‘./src/main.js’)

问：index.html main.js app.vue文件的关系？
答：main.js是入口文件，初始化vue并配置相关组件。进入到vue文件，app.vue是具体组件，最后显示在index.html.（大致流程是这样）

先看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,
  template: '<App/>',
  components: { App }
})

import：引入文件，就像引用js，css文件一样
App：引入App这个组件
router：引入路由配置
new Vue：相当于初始化，里面的配置意思是使用{App}组件，并且用这个标签包含（组件内容放入标签中），在页面ID为app的标签中使用这个组件。router是路由注入，通过路径选择资源，配置写在了index.js文件里。

再看index.js文件代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    }
  ]
})

Vue.use(Router):声明使用Router组件。
router：[]是具体的路由配置。
说明：因为在路由配置里使用了HelloWorld组件，所以要import这个组件。@是路径，在配置文件中有具体的配置。
再看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>

template标签:模板组件
前面在main中声明的内容都会在template的id为app的router-view标签中显示
script标签:脚本
style标签:样式
理解：html页面中的内容对应填充（只为了更好的理解）

以上就是执行npm run dev之后看到页面的整个过程。