vue项目搭建及基本结构讲解

vue实例的基本结构，有哪些配置属性方法？

在了解vue配置之前，我们首先要学会怎么创建一个vue项目，这里怎么搭建vue项目的环境，我就不说了，如果还有不懂的，可以自己查一下文档

一、怎么搭建vue项目

1，打开你要建立项目的文件夹，进入cmd找到进入当前文件下的路径

2，在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。

image

3，到当前项目的路径下，安装项目依赖包，运行命令：npm install ，程序会根据package.json的配置node_module依赖包

4，运行起项目，根据package.json中的配置，运行起项目，例如运行命令为：npm run dev（具体运行命令是根据项目中的配置决定的）

二，介绍一下vue项目中的文件具体作用

image

目录结构：
├── build // 构建发布代码存放的位置
├── config // 配置目录，端口号等
├── node_module // 执行npm install产生的，包含项目中运行所产生的依赖包
├── src // 源代码，我们编辑的文件一般都在这里面
│ ├── api // 接口
│ ├── assets // 主题字体图片公告css等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ │ ├── index.js //注入所有vuex相关，并导出
│ │ ├── getters.js //store的计算属性
│ │ ├── muattion.js //更改store中的状态（唯一方法）
│ │ ├── state.js //储存状态
│ │ └── actions.js //维护异步数据
│ └── Tinymce // 富文本
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口加载组件初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置，ES代码相关转化配置
├── editorconfig // 项目文本相关配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 仓库忽略的文件夹配置
├── .postcssrc.js // css相关转化的配置
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json

以上是我查了一些资料，对vue项目文件夹中的具体介绍

三，介绍vue的基本结构

<template>
  <div class="hello">
    <!-- html书写范围 只能有一个根目录-->
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
// js 业务实现逻辑
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {//这里必须返回一个初始化数据对象的函数，所以要return返回
    return {
      //初始化数据
      msg: "今天天气真棒"
    };
  },
  beforeCreate() {
    // 组件初始化执行的函数
    // 在beforeCreate函数执行前，data和mothods中的数据还没有初始化
  },
  created() {
    // data和mothods都已经被初始化，但页面还未显示
    //最早只能在created中操作
  },
  beforeMount() {
    // 组件挂载前，模板已经在内存编译好了，
    //但尚未挂载到页面中，此时页面还是旧的数据
  },
  mounted() {
    // 如果要通过某些插槽操作页面上的DOM节点，最早要在mounted中进行
    // 组件挂载后，方法执行后，页面显示
    // 此时组件已经脱离了创建阶段，进入运行阶段
  },
  beforeUpdate() {
    // data数据是最新的，页面尚未和最新的数据保持同步，页面中的显示的数据还是旧的
    // 数据更新时调用
  },
  updated() {
    //组件更新，方法执行后，页面显示都是最新数据
  },
  beforeDestroy() {
    // 实例销毁之前调用。在这一步，实例仍然完全可用。
  },
  destroyed() {
    // Vue 实例销毁后调用。调用后，
    // Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，
    // 所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
  },
  watch: {
    // watch监听方法，擅长处理的场景：一个数据影响多个数据
  },
  computed: {
    // computed擅长处理的场景：一个数据受多个数据影响
    // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
  },
  methods: {
    // 页面事件的方法
  }
};
</script>
<style scoped>
/* css 界面布局代码  scoped：防止各页面中css互相影响 */
</style>

四，render 与 template

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

new Vue({
  el: '#app',
  render: h = > h(App)
 })

五，packjson中的内容

{
  "name": "vueactualcombat",  //  项目的名字
  "version": "0.1.0",  //   项目的版本
  "private": true,  //  项目在npm将拒绝发布它
  "scripts": {
    "serve": "vue-cli-service serve",  //  项目启动的指令配置
    "dev": "vue-cli-service serve",  //  项目启动的指令配置
    "build": "vue-cli-service build",  //  项目打包的指令配置
    "lint": "vue-cli-service lint"  //  项目初始化的指令配置
  },
  "dependencies": {  //  能够正常运行所依赖的包，在使用 npm install 安装你的包时会自动安装这些依赖
    "element-ui": "^2.4.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
    ......
  },
  "devDependencies": {  //  开发应用时所依赖的工具包，通常是一些开发、测试、打包工具，
// 例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-plugin-router": "^4.5.0"
    ......
  }
}

在 package.json 文件里面提现出来的区别就是：
npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；
npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。

devDependencies  里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；
dependencies  是需要发布到生产环境的，是要打包的。

六，为什么组件 data 是一个函数

1，如果 data 不是一个函数，Vue 会报错
2，Vue 组件让每个组件对象都返回一个新对象，当触发改组件时候，数据中的 data 会自动更新成最新的数据，而不是停留在上一个组件中的旧数据

以上就是我对vue的一个大致的了解；如果是同一个对象，组件多次使用会互相影响