H5 case development

Vue Installation

Vue.js I won't support it IE8 And below , because Vue.js Used IE8 It can't be simulated ECMAScript 5 characteristic . Vue.js Supports all compatibility ECMAScript 5 Browser , It is generally recommended to use NPM Conduct Vue Installation .

vue Installation of depends on node.js, Make sure that... Is installed on your computer node.js. Access to cmd Editor , Enter the command node -v To view the .node Try to use a newer version , Otherwise, subsequent installation will prompt node Version is too low . Go to node The next version of the official website node Just re install it . If installed successfully node The following will appear ：

determine node After installation , You can start vue Installed. . Here is Taobao mirror image , Mirrored with Taobao cnpm Instead of npm Installation , It's going to be a lot faster . Taobao mirror recommended website ：https://npm.taobao.org/. You can also enter cmd Editor , Enter the command vue -v To view the .

#  Latest stable version 
$ npm install vue

Create a Vue project

#  Global installation  vue-cli
$ npm install --global vue-cli
#  Create one based on  webpack  New project for template 
$ vue init webpack my-project
#  Installation dependency , Walk you 
$ cd my-project
$ npm install
$ npm run dev

Vue After the project is created successfully , We go through npm run dev function , Then enter Vue Welcome page of , Now you can use Vue The grammar of , Write your own Vue Project . Then we can set , Automatically open the browser at runtime . find config Under folder index.js file , take autoOpenBrowser Set to true, Errors may be reported during operation , I need to configure it build Documents under documents .

web-app Practice project development

Introduce

be based on vue2.0+localStorage Local Notepad developed , And packaged into something like Android Of webApp.

function

• Support carriage return to add events
• Support event state switching
• Add event -> Enter the unfinished list
• Hang in the air -> Completed ( Check checkbox)
• Hang in the air -> Cancelled ( Click the Cancel button )
• Completed -> Hang in the air ( Uncheck the checkbox)
• Cancelled -> Hang in the air ( Click the resume button )
• Support filtering events
• Support editing events
• Support deleting events
• Support clearing all events
• Support localized storage
• Support export .xlsx Formatted data

Function realization

1. The project is a single page application , All components are spliced , Because the function is simple , Not used Vue The routing .

2. Data is saved locally ,localStorage yes HTML5 A new method of storing data on the client is provided , No time limit , the second day 、 After the second week or the next year , Data is still available .

• Store the data ：localStorage.setItem(item, value)
• get data ：localStorage.getItem(item)
• Remove data ：localStorage.removeItem(item)

3. Communication between parent and child components , Scope of component instance is isolated . This means that the data of the parent component cannot and should not be referenced directly within the child component's template .

• Parent component can use props Pass data to subcomponents .
• Subcomponents can use $emit Trigger custom events for parent components .

4. You can filter by type and keyword , The user selects the type , Or monitor the entered search keywords by using filters ( filter ), An exact search or fuzzy query returns something that meets the criteria .

//  Project part code 
  query () {
      if (this.selectIndex || this.selectIndex === 0) {
        this.arr = this.$root.todoItem.filter((item) => item.num === this.selectIndex) //  Precise query 
      } else {
        this.arr = this.$root.todoItem
      }
      if (this.screen_title) this.arr = this.$root.todoItem.filter((item) =>   item.value.indexOf(this.screen_title) > -1) //  Fuzzy query 
    }

5. Taking data to .xlsx Format export , This feature requires three dependencies to be installed , Create a new folder in the project ：（vendor— Take any name ） There are two files in it Blob.js and Export2Excel.js.Blob.js Turn the data we want to export into binary , and export2Excel You can set the export style and provide the export method .

npm install file-saver 
npm install xlsx
npm install script-loader

Details of each component

1. {eventAdd.vue} This is a component that adds events , The event object obj Save to Vue Global variables todoItem in , First we need to define a Vue The global object stores the data of the added event , stay main.js create Vue When an instance , Define a todoItem Variable . And then in eventAdd Define an object in the component , And set the properties of its object , Property value , Comments have been made at the end of the code .

2. {eventsList.vue} Components that handle events , First, through this.$root.todoItem obtain Vue The event stored in the global variable , Let the back pass v-for Process the data and render it to the page , When clicking on different events , Change the event object num Property value of property , change num After the attribute value , Be sure to put... Again todoItem Save variables locally （ Comments have been made on the attribute value code of different attributes ）, adopt v-if Judge num The attribute values of render events to different locations . For example, click cancel event , Will the event of num The property value becomes 2.

3.{sidebar.vue} It's the sidebar , Provide switching themes , Download data , Edit the data , Empty data . Click download data , The browser will automatically store in todoItem The event object in the variable has been set by its own style .xlsx Format export , The specific implementation depends on the code . Click edit data , When emptying data , adopt this.$emit（） Pass the information to the parent component , And the component passes through prop Call other components .

Parent component （app.vue） Its structure

4. {eventsTable.vue} This component is used to edit events , Provide search , edit , Delete event function , Be careful ： You need to define an intermediate variable , You can't use it directly this.$root.todoItem List rendering , Otherwise, the original event data will be changed during query . There are several ways to query , as follows ：
   

5. There are other bullet frames , Head , Tail Unit , Through the communication between parent and child components , And it can be reused , Probably an advantage of component-based development , You can write a lot less repetitive code , The code has detailed comments .

pack

After the completion of project development , You need to package to deploy to the server , We need to change it before packing config Folder index.js Configuration of files , Need to add one more point . After the package is completed, you can dist Find the packaged file under the folder .

//  Execute your destiny 
npm run build

Package to Android webApp

When the packaging is complete , It's through cordova,android studio To package into Android webApp, In fact, the packaging process is not difficult , Just a few steps , It's just a little troublesome to configure Android bad environment , You can try to understand , Package your project into Android webApp.

summary

I'm also Xiaobai , Keep stepping in the pit , A lot of guidance , Exchange and learn from each other . This case list is suitable for novices to understand vue Several important features of , I don't think I can use the route , Actually Vue The function of routing is still very powerful .

Android webApp download https://pan.baidu.com/s/1i7clnvv
github Address https://github.com/flym1013/notes-