如何在项目中使用Vuejs

使用Vuejs,第一步肯定是安装好它。之前我们是使用导入本地下载好的vuejs。在实际项目中我们是通过npm安装一个vue的包，然后就可以使用vuejs了。

安装Vuejs

npm install vue@2.5.21 --save

vue并不是开发时依赖，运行项目的时候肯定也依赖到了Vuejs:运行时依赖.

在项目中使用Vuejs

回顾一下我们使用path包的过程，我们时require将其导入。所以我们使用Vuejs肯定也要对其进行导入。当Vuejs下载好后，放在了node_modules文件夹中，这个文件夹存放的就是node依赖的模块（包）。
导入vue的命令

import Vue from "vue"

这个命令会从node_modules中去找vue文件夹,并将其导出，这是因为vue.js中存在export default.默认导出。这样我们就可以在我们的项目中使用Vuejs了。 main.js:

let app = new Vue({
    el:"#app",
    data:{
        message:"我是猪"
    }
})

index.html:

body>
    <div class="classA"></div>
    <div class="classB"></div>
    <div id="app">
        {{message}}
    </div>
</body>
<script src="./dist/bundle.js"></script>
</html>

重新打包，跑起来。发现报错。

**这个原因是什么呢？实际上Vue有很多的版本。一个叫runtime-only.一个叫runtime-compiler。他们之间的区别很小，就是能否编译Vue的模板.**runtime-conpiler版本中比runtime-only中多了将template编译的代码，（实际上就是将template解析成render函数）。
解决方案，我们只能使用runtime-compiler版本的vue。注意是在wepack的配置文件中解决，给之前导出的对象添加一个resolve属性，对应一个对象，对象对应一个alias属性，就是起别名的意思，像是告诉webpack如果你碰到了vue，那么你就去找这个路径的vue.js。所以刚刚那个import Vue from "vue"碰到vue就去找这个对应路径的vue了。抱着好奇心我去看了看这个路径下的vue 发现他确实有很多的版本。

template和el

这里的Vue实例根本没有template的这个options，那这里存在template嘛？
当然存在，看过官网生命周期的那张图就可以知道，这里会把 <div id="app">{{message}</div>也就是挂载点outerHTML对应的HTML内容当成template。
另一个问题：当el和template同时存在怎么办呢？
template的HTML内容会完全替换挂载点。

vue组件化开发

第一步，抽离根实例

既然可以通过template模板替换掉挂载点的内容，我们可以把挂载点的内容抽离到template中，直接修改template即可。 index.html:

<body>
    <div class="classA"></div>
    <div class="classB"></div>
    <div id="app">//只剩一个div#app
    </div>
</body>

main.js:

import Vue from "vue"
let app = new Vue({
    el:"#app",
    data:{
        message:"我是猪"
    },
    template:`<div>//将原来的内容抽离到模板
    {{message}}
    </div>`
})

第二步，继续抽离根实例

我们确实只需要根实例的一个壳儿就行了，把里面的内容抽成一个子组件。
main.js:

import Vue from "vue"
const cpn = {
    template:`<div>
    {{message}}
    </div>`,
    data(){
        return {
            message:"我是猪"
        }
    }
}
let app = new Vue({
    el:"#app",
   template:`<cpn/>`,
    components:{
        cpn
    }
})

这里我将app实例的所有实际内容都抽出来了抽成了一个组件，为什么要抽成组件呢？因为我们vue.js有专门的文件格式存储组件：.vue文件。我们就把组件放在这里就行了，那么我们页面的结构就更清晰了

第三步将组件抽成.vue文件

将cpn组件抽离出来 app.vue:

<template>
  <div>
      {{message}}
  </div>
</template>

<script>
export default {
    data(){
        return {
            message:"我是猪"
        }
    }

}
</script>

<style>

</style>

注意，如果使用vscode进行开发。创建好.vue文件后，vue文件的基本模板，得下载一个vscode的插件：vetur。然后在.vue文件中输入d+table即可。 抽成组件之后在main.js中使用当然还得导入。

import Vue from "vue"
import cpn from "./components/App.vue"//导入这个组件构造器
let app = new Vue({
    el:"#app",
   template:`<cpn/>`,
    components:{
        cpn//对象字面量的增强写法
    }
})

import cpn from "./components/App.vue"请注意这个地方如果想省略.vue后缀名，得在webpack.config.js得配置

  resolve:{
         extensions:['.vue','.js'],//webpack遇到到这些文件的时候，不需要添加拓展名了
          alias:{
              "vue$":"vue/dist/vue.esm.js"
          }
      }

打包.vue文件

如果我们直接打包肯定是会报错的，因为webpack并不能打包.vue文件，那么我们怎么办呢？当然是安装对应loader。

npm install  vue-loader@13.0.0 --save-dev  vue-template-compiler@2.5.21

vue-loader 加载.vue文件
vue-template-compiter 编译模板（请注意，vue的版本一定要和vue-template-compiler一致，不然打包会报错，比如我。。。一开始就疯狂报错）

配置vue-loader

 {
            test: /\.vue$/,
            use: ['vue-loader']
      }

再次打包。没任何问题。

Webpack--与Vue相关