_Vue project web front-end project combat fake US corporations] [Ashoka classroom

Directory
Vue 2.0
a, Vue Cli
1.1 Installation
1.2 Creating Project
1.3 Start Project
1.4 directory schema
1.5 webpack configuration
II project combat
2.1 technical architecture
2.2 directory deployment
2.3 Routing
2.4 webpack expand
2.5 vue cli expand
2.6 Data
2.7 Development Module order
three, Vue
3.1 routing guard

A, Vue Cli
in vue project, we want to compile vue file, to compile ES6 file, to compile css pre-compiled language, etc., prior to project development, we have to do a lot of preparation. vue order to simplify the preparation before development, providing vue-cli scaffolding.
1.1 Installation
vue-cli, provides vue instructions, so to global install
npm install -g @ vue / cli
installation is complete, provide a vue instructions, check the version number by vue -V
create 1.2 project
created by create project parameters
vue create the project name
project vue cli creation is also based yarn management
npm install yarn
yarn is a package manager, to replace npm
in the project, install the module, by yarn to install
npm install: npm install module
yarn installation: yarn add modules
1.3 to start the project
by yarn serve to start the project.
1.4 directory schema
node_modules dependent module
public static resource module
index.html entrance html file
favicon.ico icon file
directory src development
assets all static resources (will be processed WebPACK)
Components All components
views routing page
App.vue application components (the first letter vue cli the component files are capitalized.)
Main.js project entry file
router.js routing file
store.js store files
.broserslistrc browser configuration
.eslintrc.js js check the configuration
.gitigonore git ignore file submitted when the
babel.config.js babel profile
package.json module configuration file
postcss.config.js css compiler configuration
yarn.lock yarn lock file

1.5 webpack configuration
vue cli also by webpack configuration, so we can define webpack configuration
in vue.config.js file (we can customize)
configuration defined by configureWebpack WebPACK
1yarn serve

Second, the actual project
we implement a mobile terminal buy site.
2.1 Technical Architecture
vue, vuex, vue router, axios , vue components, vue-cli, less | scss , webpack achieve a single-page application.
2.2 Directory Deployment
Reference vue cli directory structure, webpack compiled project
src directory development
assets static resource
components All components
views all routing component
App.vue application components
main.js entry file
store.js store module
router.js routing module
index.html entrance html file
webpack.config.js webpack configuration
2.3 route
has three pages, define the three routes
Home default route
list / list /: id
details page / the Detail /: the above mentioned id
2.4 WebPACK expand
in the loading machine,
the include loading machine processing Contents
Contents exclude loader can not handle
2.5 vue cli expanding
we can output all configurations vue config (configuration comprising webpack)
renderings

1 // define configuration
2module.exports = {
. 3 // VUE inlet
. 4 Resolve: {
. 5 // Alias
. 6 Alias: {
. 7 VUE $: 'VUE / dist / vue.js'
. 8},
. 9 expand name //
10 extensions : [ '.js',' .vue ']
. 11},
12 is // inlet
13 is entry:' ./src/main.js',
14 // release
15 Output: {
16 filename: './dist/main. JS '
. 17},
18 is // module
. 19 Module1: {
20 is // loader
21 is the rules: [
22 is // ES6
23 is {
24 Test: /.js$/,
25 Loader:' Babel-Loader ',
26 is Query: {
Presets 27: [ 'ES2015']
28},
29 // directory filter
30 the include: '/ the src /',
31 is the exclude: '/ the node_modules /'
32 },
33 // vue组件
34 {
35 test: /.vue$/,
36 loader: 'vue-loader'
37 },
38 // css
39 {
40 test: /.css$/,
41 loader: 'style-loader!css-loader'
42 },
43 // less
44 {
45 test: /.less$/,
46 loader: 'style-loader!css-loader!less-loader'
47 },
48 // scss
49 {
50 test: /.scss$/,
51 loader: 'style-loader!css-loader!sass-loader'
52 }
53 ]
54 }
55}

2.6 Data
Generally speaking, there are two types of data the site
a class of data is unchanged, the results of each browser opened to see it is the same, so this kind of data we can write directly on the page, as synchronous data,
when we finished loading the page, we can directly use this kind of data
a type of data is variable, the results of each browser opened to see is not the same, so this kind of data we can act as asynchronous data through asynchronous request
when our page loads, we released asynchronous request such data or
a <! - classification module ->
2 <UL class = "Home-types">
. 3 <Router-Link-for = V "( Item, index) in types ": Key =" index "Tag =" Li ": to =" '/ List /' + item.id ">
. 4 <IMG: the src =" '/ IMG / icon /' + Item. IMG "Alt =" ">
. 5 <P> item.Text {{}} </ P>
. 6 </ Router-Link>
. 7 </ UL>

2.7 Development Module order
1 acquire data and store
2 page structure analysis, write view
3 view writing styles based on
4 binding interaction
three, Vue
3.1 routing guard
vue routing provides three monitor routing changes in the way
the first global monitor
all routes changes are monitored
in the routing object instance, the route by listening beforeEach, afterEach other method of changing
the parameter is the callback function
callback function parameters
of a route object that represents the current
second parameter represents a routing object
if beforeEach will the third parameter appears, similar express routes middleware third parameter, next method, whether to continue the implementation of the method must be implemented.
The second partial listens
only to change a monitor routing components
us on component is instantiated object that can monitor changes in the routing through beforeRouteEnter, beforeRouteLeave, beforeRouteUpdate other methods.
The first parameter indicates the current routing object
the second parameter represents a route object on
the third parameter into the route that the implementation of the method, it is necessary to perform
a third listening watch
we can route data through monitor watch component is instantiated object changes
may listen to property change $ route, the route is determined
first parameter represents the current routing object
second object parameter indicates a route
In the official network, monitor the first two routing varying ways also referred guard routing
global monitor also referred to as a global routing guard
local monitor also referred to as the local routing guard
1 @ local monitor
2beforeRouteEnter (route, oldRoute, next) {
the console.log. 3 (arguments)
. 4 // must perform the next method
. 5 next ();
. 6},
. 7 // monitor changes the routing
8watch: {
change // routing data. 9
10 $ route () {
. 11 // Console. log (111, arguments)
12 is // update data
13 is this.updateData ();
14}
15}
16 // monitor changes the routing
17router.afterEach ((Arg ...) => the console.log (Arg))
18 is // before changing
19router.beforeEach ((route, oldRoute, Next) => {
20 is the console.log (route, oldRoute)
21 is necessary to perform //
22 is Next ();
23 is})

Need the source code, case, video tutorials, I can find or search public number: icketang