Vue-CLI + Webpack Notepad Created

Vue-CLI + WebPack Notepad Project is used in Vue-Cli2.0 project build tool WebPack

project preparation:

1. Learn about Vue2.0

2. Learn some ES6

3. Reserve some WebPack knowledge

Reference project address: Vue2.0 builds the best practical combat

We will Choose to use some Vue surrounding libraries Vue-CLI, Vue-Router, Vue-Resource, Vuex

1. Create items

2. Using Vue-Router to implement single-page routes

3. our data stream managed by vuex

4 using our vue-resource request server node

5. .vue file using the development component of

PS: This article Node v6.2.2 npm v3.9.5 Vue v2.1.0 Vue-router vue vue vue-router vue vue-router vue vuex vuex vuex vuex v2.0.0

In the end we will build a small Demo, not nonsense, Directly above.

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

1. We will use WebPack to pack, preprocess, and heat loading for our module. If you are not familiar with WebPack, it can help us pack multiple JS files as 1 entry file, and can reach on-demand. This means that we don’t have to worry about the use of too many components, which leads to too many HTTP requests, which is very beneficial to the product experience. But we don’t just use WebPack for this, we need to compile the .vue file with WebPack, if you don’t use a loader to convert Style, JS, and HTML in our .vue file, the browser cannot identify.

2. The module heat loading is a very bunker of WebPack, which will bring great convenience to our single-page applications.

Usually, when we modify the code refresh page, all the status in the app is not. This is very painful for developing a single page application because it is necessary to run again. If there is a module hot load, when you modify the code, your code will be modified directly, the page will not refresh, so the status will be retained.

3.Vue also provides us with CSS pre-processing, so we can choose to write LESS or SASS instead of native CSS in the .vue file.

4. We used NPM to download a bunch of dependence, but now we can choose Vue-CLI. This is a great pioneering in the VUE ecosystem. This means that we don’t need to manually build our project, and it can quickly generate us quickly.

First, install the Vue-CLI. (Make sure you have node and npm)

npm i -g Vue-CLI

then create a WebPack project and download dependencies

Vue init webpack vue-tutorial

CD Vue-Tutorial

NPM I

Then use NPM Run DEV to run our application in thermal loading

vue-cli+webpack记事本项目创建 A line of commands represent it to find the scripts object of package.json, and perform Node Bulid / dev-server.js. In this file, configured WebPack to make it compile the project file and run the server, we can view our app at localhost: 8080.

After these are ready, we need to download three libraries for our routes, XHR requests, and data management, we can find them from the official website of Vue. in additionWe use bootstrap as my UI library

npm i vue-resource vue-router Vuex Bootstrap –Save

Initialization (main.js)

vue-cli+webpack记事本项目创建 View our application file, we can find App.Vue and Main.js in the src directory. Main.js will be used as the entrance file we applied and app.Vue will use initialization components of our application. Let us improve main.js

// src / main.jsimport Vue from ‘Vue-router’Import VueResource from’ Vue- Resource’Import App from ‘./app’Import home from’ ./components/home’Import ‘bootstrap / dist / css / bootstrap.css’vue.use (VueRouter) Vue.use (vueresource) const routes = [{Path : ‘/’, Component: Home}, {Path: ‘/ Home’, Component: Home}]; Const Router = New Vuerouter ({routes}); / * eslint-disable no-new * /// Instantiation us Vuevar App = New Vue ({EL: ‘#App “, Router, … app,});

This is two and 1.0 different Place

1. The parameters of Vue-router route are made by the object to be aware of the array. Also, the EL parameter of the instantiated Vue can no longer set HTML and BODY, because in Vue2 will replace our designated tag
 II, we must specify the rendering when instantiate Vue, We used to specify routed to specify Router.Start (App, '#app ", and in Vue2, it is not required  , we can find that we use two components in main.js App.Vue. And home.Vue, let us implement them in the same manner later. 
And our index.html only needs to retain

, our Vue sets EL: ‘#app’ when instantiation, so replacing this tag, for our App components Content

// Index.html

Our initialization is over Next, let’s start creating components.

Create Home Components

First we write a top navigation for our application in app.vue.

// SRC / App.Vue
  
Plate

   
// src / components / home.Vue
Create a task

If you don’t accidentally, you can see the following effect

Create a sidebar component

There is still a blank on the left side of our homepage, we need it to put down a sidebar to count the total time of all plans.

// SRC / App.Vue // …

 //...

Import Sidebar from './components/sidebar.vue 'Export DefaUlt {Components: {'Sidebar': Sidebar},}

In SideBar.Vue We need to get the total time through the Store, our total time is sharing Data
// SRC / Components / SideBar.Vue

Has been long

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

Export Default {computed: {time () {Return this. $ Store.state.totaltime}}}
  
Creating a list of schedule components
Then we need to create our time tracking list.
// SRC / Components / TimeTries.Vue // `V-IF` is an instruction of Vue / /` $ route.path` It is the path to the current routing object, which will be parsed to the absolute path when //`? Rt.path! == '/ time-entries / log-time'` is the `true` is displayed,` false`, is not displayed. // TO routing address
creates
    No plan yet  

{PLAN.NAME}}
   {{PLAN. Totaltime}} 
{{plan.date}}

{{PLAN.Comment}}

About the explanation of Template, It’s, then look at our script

// src / components / timeentries.Vue
export default {name: ‘TimeTries ‘, computed: {plans () {// Take data from the Store Return this. $ store.state.list}}, methods: {deleteplan (IDX) {// later, here, the method // minus the total Time this. $ Store.dispatch (‘DECTOTALTIME’, this.plans [idx] .totaltime) // Remove this plan this. $ Store.dispatch (‘deleteplan’, idx)}}}
   
Don't forget to be our groupParts written in some needed style // src / components / timeentries.Vue
.avatar {height: 75px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px;} .user-details {background-color: # f5f5f5; border-right: 1px solid #ddd; margin: -10px 0;} .time-block {padding: 10px;} .comment- Section {Padding: 20px;}

Since our data is shared, we need to exist in the Store
We are in SRC Create a directory to Store
Create 4 JS files.js, index.js, mutation-types.js, index.js, mutation-types.js, and mutations.js

4 are doing it, I suggest you read more about Vuex's documents, more postures, more hands-on, slowly understand.

// src / store / index.jsimport vue from 'Vuex'Vue.use (Vuex); // Write a fake data Const State = {TOTALTIME: 0, List: [{name: 'Two ", avatar:' https: // sfault-avatar.B0.UPAIYun.com/147/223/147223148-573297d0913c5_huge256 ', date:' 2016-12-25 ', Totaltime:' 6 ', Comment:' December 25 perfect, accompanying girl friends with Christmas Hour '}]}; Export Default New Vuex.Store ({State,}) Due to the new page and the Store configured in our port JS file
// src / main.jsimport store from './store'Import timeentries from' ./components/timetries.Vue'//...const routes = [{ PATH: '/', Component: Home}, {path: '/ home', component: home}, {path: '/ time-entries', component: timeentries,}]; var app = new Vue ({EL: '#app', Router, Store, ... App,}); 图片[5]-Vue-CLI + Webpack Notepad Created-Tumi

In no accident, you can see such a page under / time-entries routing

We can find that our Store has been constructed and successfully obtained from the Store

Creating a task component

This relatively simple, we give code directly

// SRC / Components / logtime.Vue

Date
Remark

Save

cancel

 Export Default {name: 'logtime', data () {return {date: ', totaltime:' ', Comment:' '}}, methods: {save ) {const plan = {name: 'two phtology, image:' https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256 ', Date: this.date, Totaltime: this.totaltime Comment: this.comment}; this. $ store.dispatch ('Saveplan', Plan) this. $ store.dispatch ('addtotaltime', this.totaltime) this. $ router.go (-1)}}}   This component is very simple to input 3 INPUT, then two buttons, save us to enter our store in our Store  
Logtime belongs to a sub-route of our TimeTries component, so we still need to configure our route, and use WebPack to make it lazy to load, reduce our first screen loading

// src / main.js // … const routes = [{path: ‘/’, Component: Home}, {path: ‘/ home’, component: home}, {path: ‘/ time-entries, {PATH:’ / TIME-ENTRIES ‘, Component: Timeentries, Children: [{PATH:’ LOG-TIME ‘, // Lazy Carload Component: Resolve => Require ([‘ ./ Components / Logtime.Vue ‘], Resolve),}]}]; / /…
   Waiting communication in Vue2.0, in small In the project, we can use Event Bus, and the rest is best to use Vuex. This article uses Vuex to implement data communication 
I have just seen me wrote a lot of this. $ Store.dispatch (‘saveplan’, PLAN) Similar to this code, we will unify it again.

Carefully think about it, we need two global data, one for all plans, one is an array of planned lists.

src / store / index.js did not have more introduction, in fact, it is incoming to our Store, Mutations, Actions to initialize our Store. If we need it, we may also need to create our getter in this case.

Next, we look at Mutation-Types.js, since we want to know the data very clearly, then what kind of operation should be seen, of course, this also looks at the taste of the taste

// src / store / mutation-types.js // Add total time or reduce total time export const address_total_time = ‘add_total_time’; export const dec_total_time = ‘dec_total_time’; // Added and deleted a plan Export const save_PLAN = ‘ Save_plan ‘; export const delete_plan =’ delete_plan ‘; // src / store / mutations.jsimport * as types from’ ./mutation-types’Export default {// increase total time [types.add_total_time] (state, time) { State.totalTime = State.totalTime + Time}, // Reduce Total Time [Types.Dec_total_time] (State, Time) {state.totaltime = state.totaltime – time}, // Add plan [types.save_plan] (state , PLAN) {// Setting the default value, in the future we can do login directly to read nicknames and avatar const avatar = ‘https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256’; state. List.push (obJECT.Assign ({name: ‘two “, avatar: avatar}, plan)}}, // deletes a plan [type, idx) {state.list.splice (IDX, 1);} };
   Last corresponding to our actions very well, 

// src / store / actions. jsimport * as types from ‘./mutation-types’export default {addTotalTime ({commit}, time) {commit (types.ADD_TOTAL_TIME, time)}, decTotalTime ({commit}, time) {commit (types.DEC_TOTAL_TIME, time )}, saveplan ({commit}, plan) {commit (Types.save_plan, plan);}, deleteplan ({commit}, plan) {commit (types.delete_plan, plan)}}};

  Our Actions is actually to trigger events and incoming parameters  
After adding these three files, our Store is finally complete, update our code

// src / store / index.js Complete Code Import Vue from ‘Vue’Import Vuex from’ Vuex’Import MutatiOns from ‘./ActionS from’ ./Actions’Vue.use (Vuex ); Const State = {TotalTime: 0, List: []}; export default new vuex.store ({State, Mutations, Actions}

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

THIS. $ Store.dispatch (‘Saveplan’, Plan) When this method is performed, the Saveplan method in Actions.js will be called, while saveplan will Trigger the Types.Save_plan in Mutations Finally modify the data view update

PS: There is a tip that is in Mutations, and our actions should be used in lowercase humps.

Individual understanding is actually a release of a subscription mode

Mutation-Types records all of our event name

Mutations Registered Method for Various Data Changes

Actions can write asynchronous logic or some logic, go to commit
Our event
 If we have getter, we can put some data that needs to be returned to this, not business Operation   Don't forget to use our Store 
// src / store/main.jsimport store. / store '// ... var app = new vue ({EL:' #App ', Router, Store,... app,});
Finally
With this article, we can learn many of the characteristics about VUE.
2. Preliminary on Webpack has some understanding and understanding
3. How to use .VUE happily 4. Use VUEX to make component communication 5. Application of routing (sub-route)
6. Use Vue-DevTools to observe our data Personal Website: http : //www.meckodo.com
GitHub Address: https://github.com/meckodo/vu...
The above is the full content of this article, I hope to learn from everyone Helped, I also hope that everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment