vue项目结构

项目

通过webpack构建vue项目

1、建立项目路径，然后cmd切换到工作路径

2、输入vue init webpack demo ,建立项目。其中demo是我们要建立的项目名称。

接下来就是确认项目描述信息，作者信息

 

 然后出现js语法检测的内容，直接输入n就可以。暂时用不到。一直enter

 

 然后切换到刚刚新建的demo目录下，然后执行npm run dev.编译并启动我们的项目

 

 在浏览器中输入网址，就表示已经正确配置

项目构成

简单阐述一下当我们构建完成后，vue项目中的index.html、main.js、App.vue、index.js的运行加载过程，以及首界面是如何出现的，逐步了解vue项目

 项目运行

 

Vue.component 是注册全局组件，如果注册全局组件，我们就可以直接在html直接写了 

 // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })

在网页的Title部分，加载了index.html中定义的Title，而在正文部分，加载了App.vue中定义的部分。（但是需要注意的是，在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分）

那么，我们就可以来分析上述的逻辑了，浏览器访问项目，最先访问的是index.html文件，

而index.html中 

<div id="app">来自index.html正文中的内容</div>

 上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上；

 main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过

new Vue({
  el: '#app',
  router,
  //components: {App },
  //template: '<App/>'
})

告诉该实例要挂载的地方；（即实例装载到index.html中的位置）

接着，实例中注册了一个局部组件App，这个局部组件App来自于哪儿呢？

import App from './App.vue'

new Vue({
  //el: '#app',
  components: {App },
  //template: '<App/>'
})

这个局部组件是当前目录下的App.vue；

而起模板是什么呢？模板就是组件App.vue中的template中的内容。（template会替代原来的的挂载点处的内容）

 所以Vue这个实例就是暂时的是App.vue这个组件的内容。

所以，我们进行总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

而index.html中的Title部分不会被取代，所以会一直保留。

为什么在main.js文件里面，用render: h => h(App)把它们挂载到#app里面，有的却写的是components:{app}?

new Vue({
  router,
  store,
  //components: { App }   <!---------------------------------------------vue1.0的写法
  render: h => h(App)     <!---------------------------------------------vue2.0的写法
}).$mount('#app')

 

先说render：render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来。

　　然后是  =>   箭头函数。是Es6中的新语法：（如果大家想更深入的了解，推荐一篇文章：链接：https://segmentfault.com/a/1190000009410939）

　　其实render: h => h(App)的意思， 首先 ：表示 Vue 实例选项对象的 render 方法，它作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。等价于：　　　　　　　　　　　　　　　

                              {
    　　　　　　　　　　　　　　　　　　render: function(h) {
        　　　　　　　　　　　　　　　　　　return h(App);
    　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}

  其次：Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。

接着看到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中的内容，是一个标准的App.vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分，我们注意到，<template>标签下有<router-view>标签，<router-view>标签将会把路由相关内容渲染在这个地方，接下来，我们看一下路由的内容有哪些，在哪里出现的。其实，这个文件位于src/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: 'HelloWorld',
      component: HelloWorld
    }
  ]

 

在index.js的代码中，建立了路由相关的内容，也就会渲染到app.vue下面的<router-view>中。在index.js中，将helloworld组件发布为路由，换句说，index.js在这里就是将helloword发布为路由，然后进行展示helloword内容，到此，这个页面的加载渲染过程结束了。

总结
通过上述过程，我们可以看到项目加载的过程是index.html->main.js->app.vue->index.js->helloworld.vue。这里只是对我们运行项目后，如何出现首页面做了简单的解释，对具体的实现没有进行分析。

index.html---主页，项目入口 

App.vue---根组件 是我们的主组件，页面入口文件 ，所有页面都是在App.vue下进行切换的。也是整个项目的关键，app.vue负责构建定义及页面组件归集。

main.js---程序入口文件，是初始化vue实例并使用需要的插件,加载各种公共组件.

自定义组件得在vue实例中才会生效。自定义组件可以内嵌样式 

单文件组件

vue 的单文件组件是官方提供的一种用来组织组件代码的形式，
该文件以 .vue 为后缀，
该文件会被 vue-cli内置的 webpack解析生成对应的 javascript、html、css文件,涉及到
单文件组件把一个组件所包含的 结构、样式、行为 分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中
一个单文件组件最少必须包含 template，可以不需要 script 和 style
src 属性

我们还可以通过 src 属性把文件分离到单独的文件中

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
这里的 src 同样遵循模块化的导入规则，./ 开头的表示相对路径，/ 开头表示 NPM 包中的资源

 

个人