Vue2 Development Daquan

Resources:

Vuex	Element	Qs.js	Axios.js
Vue	Promise	A deep understanding of the use of ES6 's promise	Vue2 Setting the page title
Mint UI	webstorm2017 activation	Deep understanding of slots and Slot-scope in Vue	Handling Static Assets

Development environment: WIN10 64bit

Development tools: Webstorm

node. js

The package Manager under Npm:node.js.

Webpack: Its main purpose is to prepare the static resources that all browsers need to publish through the COMMONJS syntax, such as the merging and packaging of resources.

VUE-CLI: User generated Vue project template.

Install node. js

Version of node used in this book: node-v8.11.2-x64

: Github.com/zouyujie/software-package

Of course, you can also go to the official website to download the latest version of node. JS, official website address: nodejs.org/en/, you need to note that download the stable version on the left.

Double-click, after installation, to view it in the cmd command form.

C:\windows\system32>node-vv8. 11.2

node. js comes with NPM, and we'll look at NPM,

c:\windows\system32>npm-v5.6.0

NPM installation Vue.js

Command: NPM Install Vue-g

Here, the-G refers to the installation to the global directory.

View version:

c:\windows\system32>vue-v2.9.3

Suppose I want to create a new project under the App_codes folder in E, then we can use CMD to jump to this directory and execute: Vue init webpack Vue-mui

Next, press ENTER as shown:

Finally, wait a certain time, the results of the operation are as follows:

# Installing Project Dependencies ... # ========================npm WARN deprecated browserslist@2.11.3:browserslist 2 could fail onReading Browserslist >3.0 config used in other tools.npm WARN deprecated browserslist@1.7.7:browserslist 2 could fail onReading Browserslist >3.0 config used in other tools.npm WARN deprecated bfj-node4@5.3.1:switch to the ' BFJ ' package forfixes and new features!> uglifyjs-webpack-plugin@0.4.6 postinstall E:\app_codes\vue-mui\node_modules\webpack\node_modules\Uglifyjs-webpack-plugin> Node Lib/post_install.jsvue-mui@1.0.0 E:\app_codes\Vue-mui+--autoprefixer@7.2.6| +--browserslist@2.11.3
...

NPM WARN Optional Skipping optional dependency:fsevents@^1.2.2 (node_modules\chokidar\node_modules\fsevents): NPM WARN notsup skipping OPTIONAL dependency:unsupported platformFor fsevents@1.2.4:wanted {' OS ': ' Darwin ', ' Arch ': ' Any '} (current: {"OS": "Win32", "Arch": "x64"})NPM WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed.# Project initialization finished !# ======================== toget started: CD vue-mui npm run devdocumentation can is found at vuejs-t emplates.github.io/webpacke:\app_codes>Vue-cil is a scaffolding tool for Vue. Its templates can be viewed through vuejs-templates. ' Vue-cil is a scaffolding tool for Vue. Its template can be passed through ' not internal or external commands, nor can it be a running program or batch file. E:\app_codes>e:\app_codes> We first need to install Vue-cil. The command is as follows: ' We first need to install Vue-cil. The command is the following: ' not an internal or external command, nor a program or batch file that can be run. 

The above prompt is because we did not install VUE-CLI first, and then we install VUE-CLI

Installing VUE-CLI

NPM Install Vue-cli-g

Description: Install Vue Scaffolding

vue-cilIt's the Vue scaffolding tool. Its templates can be viewed through vuejs-templates.

At this point, we have created a new project using the template, we can see the following in the E:\app_codes\vue-mui:

Open the project with Webstorm, then run NPM run Dev

As shown in the success of the run, and then enter the address in the browser: http://localhost:8080, you will see the following results:

Installing Vuex

NPM Install Vuex--save

Installationaxios

NPM Install Axios–save

Installing MOCKJS

NPM Install MOCKJS--save-dev

Installationelement-ui

NPM I Element-ui-s

Instance

How to set a fixed background image:

Body   {  background-image: url (bgimage.gif);   background-attachment: fixed;  }

vue2 to set the page title issue:

Www.cnblogs.com/jshare/p/7421670.html

vue2.0 resource file assets and static differences:www.cnblogs.com/minigrasshopper/p/8011630.html

C:\windows\system32>e:e:\>cd E:\MyWorkSpace\vuecodese:\myworkspace\ Vuecodes>

Continue running: Vue init webpack vue-mui.

After the run is complete, the following prompt appears:

Added 1132 packages in 95. 618s# Project initialization finished! # ======================== toget started:  cd  vue-mui  run  Devdocumentation can found at https://vuejs-templates.github.io/webpack

Promise compatible IE browser

The Promise object is used in the Axios used in Vue, but this object does not support any IE browser, which means that all IE browsers do not support interface calls.

Solution:

Install es6-promise--Save

Then main.js the top add code:

' Es6-promise/auto '  "babel-polyfill";

Use Vue-route's Beforeeach to implement navigation Guard (route Pre-jump Authentication login)

Continuous update ...