vue-cli+webpack记事本项目创建

下面是“vue-cli+webpack记事本项目创建”的完整攻略：

一、前置条件

在开始构建项目之前，请确保已经安装以下软件：

• Node.js: 版本>=8，用于运行vue-cli。
• npm: Node.js自带的包管理工具。

二、创建vue-cli项目

1. 打开命令行工具，输入以下命令安装vue-cli:

npm install -g vue-cli

1. 使用以下命令创建一个新的vue-cli项目:

vue init webpack my-note

其中“my-note”是项目名称，可以根据自己的需要更改。

1. 根据命令行提示，选择需要添加的功能，如ESLint、babel等，并输入相关配置。

2. 完成之后，进入到my-note目录并安装所有依赖:

cd my-note
npm install

三、添加数据存储功能

1. 首先，安装localStorage库：

npm install --save store

1. 在src目录下创建一个store.js文件，并在其中添加以下代码：

import store from 'store'

const STORAGE_KEY = 'my-note'

export default {
  fetch: function () {
    return store.get(STORAGE_KEY, [])
  },
  save: function (notes) {
    store.set(STORAGE_KEY, notes)
  }
}

上面的代码使用了store库来实现localStorage的读写操作。fetch方法用于读取localStorage中的数据，save方法用于保存数据。

1. 在组件中使用这个store.js来读取和保存笔记数据，在App.vue文件中添加以下代码：

import NoteStore from './store'

export default {
  // ...
  data () {
    return {
      notes: NoteStore.fetch()
    }
  },
  methods: {
    addNote () {
      // ...
      NoteStore.save(this.notes)
    }
  }
  // ...
}

上面的代码使用了fetch方法来初始化notes数组，使用save方法来保存笔记数据。

1. 至此，你的记事本应用已经可以实现数据的存储和读取了。

四、添加markdown编辑功能

1. 安装markdown编辑器编辑器库：

npm install --save mavon-editor

1. 在需要编辑的组件中引入mavon-editor并使用。

在edit.vue组件中添加以下代码：

import mavonEditor from 'mavon-editor'

export default {
  // ...
  components: {
    mavonEditor
  },
  data () {
    return {
      newContent: '',
      editorOption: {
        scrollStyle: {
          height: '300px'
        }
      }
    }
  }
  // ...
}

上面的代码添加了一个HiEditor组件，并在data中定义了editorOption用于设置编辑器的样式和尺寸。

1. 在需要展示markdown内容的组件中引入mavon-editor并设置content属性。

在note.vue组件中添加以下代码：

import mavonEditor from 'mavon-editor'

export default {
  // ...
  components: {
    mavonEditor
  },
  props: ['title', 'content'],
  data () {
    return {
      show: false
    }
  }
  // ...
}

上面的代码添加了一个HiEditor组件，并通过props接收父组件传递的title和content属性，用于在页面中展示笔记的内容。

总结

通过这次练习，我们学习了如何使用vue-cli和webpack快速构建一个完整的记事本应用，并添加了数据存储和markdown编辑功能。我们可以发现，vue-cli和webpack的组合能够极大地提高项目开发的效率，使得我们可以更加专注于业务逻辑的实现。