Vue-cli基础梳理

Vue-cli是vue官方出品的快速构建单页应用的脚手架。

1.vue-cli项目目录结构

build项目构建（webpack）相关代码
config 项目开发环境配置
node_modules 项目中安装的依赖模块
scr源码目录
----assets资源文件夹
----components公共组件
----App.vue页面入口文件
----main.js程序入口文件，加载各种公共组件
static静态文件，比如一些图片，json数据等
.babelrcES6语法编译配置文件
.editorconfig定义代码格式
.gitignoregit上传需要忽略的文件格式
.postcssrc.jspostcss配置文件
index.html入口页面
package.json项目基本信息和依赖配置

2.package.json

package.json文件是项目根目录下的一个文件，定义该项目开发所需的各种模块以及一些项目配置信息。
package.json里的scripts，定义了可以用npm运行的命令。
package.json里的dependencies，项目运行时所依赖的模块。
package.json里的devDepentencies，项目开发时所依赖的模块。

3.打包

$npm run build命令后，vue-cli会自动进行项目发布打包，命令执行完后，在项目根目录生成dist文件夹，这个文件夹里边就是需要上传到服务器的文件。
dist文件夹目录：
·index.html 主页文件：因为我们开发的是单页web应用，所以说一般只有一个html文件。
·static 静态资源文件夹：js、css和一些图片。

4.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引进了App的组件和<App/>的模板，通过import App from './App'引入的。

5.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>

(1)<template></template>标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和<router-view></router-view>标签，<router-view>标签说明使用了路由机制。
(2)<script></script>标签包裹的js内容：Vue的逻辑代码。
(3)<style></style>标签包裹的css内容：写css样式。可以用<style scoped></style>来声明这些css样式只在模板中起作用。

6.router/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: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

通过import HelloWorld from '@/components/HelloWorld'引入，并在下方设置路由，设置HelloWorld为/跟路由组件。