webpack && 脚手架

---

一.Webpack 的概念

webpack 就是一个打包工具，把用模块化开发出来的软件，转换成 浏览器可以识别的代码。webpack的安装 依赖于 node.js ，在安装 node.js 的时候，会自动的安装一个 npm 的包管理工具。

二.Webpack 的基本使用

---

1.先认识两个文件夹

• src ：（写的模块是放在这里的）
• dist：（distribution，发布，发布出来的东西是放在这个文件夹 里的）

2.如何将部分写好的代码，导出到文件中

webpack ./src/main.js  ./dist/bundle.js

注意，打包的时候，只需要指定第一个目标文件夹就行了。webpack会自动把他所依赖的包，一起打包进去。

三. 使用脚手架，如何在组件里插入组件

3.1如何在组件里注册组件

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 注册一下
  components: {
    App
  },
  // 注册完使用一下
  // 这里是我注册完组件以后，在template 里面用了
  template: '<App/>'
  // 将这个模板的东西，直接进行替换到  <App></App> 里面去
})

3.2如何在组件里使用组件

<template>
<!-- 模板相关的东西放到这边 -->
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    {{name}}
    <Test></Test>
  </div>
</template>

<script>
// 脚本相关的东西全都放在 export default 里面
// 在这里还可以继续引入组件，放到这个模板里。
import Test from "./components/Test"
export default {
  name: 'App',
  data() {
    return {
      name:"cpn组件"
    }
  },
  components:{
    Test
  }
}
</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>

最终的效果

四. Vue CLI

4.1 CLI是什么意思

• Command-line Interface，翻译为命令行界面，俗称脚手架
• Vue CLI 是一个官方发布的 Vue.js 项目脚手架
• 使用 vue-cli 可以快速的搭建 Vue 开发环境已经对应的 webpakc 配置

4.2 安装 vue CLI的前提

• Node
• Npm

1.安装 脚手架3

npm install -g @vue/cli

部分的解释

-g  global（全局的，全球的）

产看Vue的版本

vue --version

2.在脚手架3上安装脚手架2的模板

具体指令可以直接产看官网

---

五.使用脚手架初始化项目

5.1初始化项目

1.Vue CLI2 初始化项目

vue init webpack my_project

2.使用 Vue CLI3 初始化项目

vue create my_project

5.2模板选择

---

一.Vuex 是做什么的？

状态管理其实就是将多个组件，共享的变量，全部存储到一个对象里，然后将这个对象放到顶层的 vue 实例里，让其他组件可以使用。所以官方专门推出了一个 Vuex 插件，他比我们自己封装的组件相比，能做到响应式。

什么时候用的到呢？

• 登录的状态，比如 token ，还有用户名称，头像，位置 等等。
• 商品的收藏按钮

---

1.1单页面的状态管理

state就是对应着里面的数据，数据可以通过 view 来展示，而展示出来的 数据，还可以 Action 对state 进行更改。

2.2具体的代码实现

1.首先安装：

cnpm install vuex --save

2.新建文件夹进行配置：

配置过程：

import Vue from 'vue'
import Vuex from 'vuex'

//安装插件
Vue.use(Vuex)

//创建对象
const store = new Vuex.Store({
  state: {
      counter:1000
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {}
})

// 导出 store 对象

export default store

4.在 main 函数中引用：

直接在组件中引用即可：

参考文献

[1]https://www.bilibili.com/video/BV15741177Eh/?p=99