Premise: to build a good environment NodeJS
node -v
asl -v
1. What is vue-cli?
vue-cli is vue.js scaffolding for the project template to automatically generate vue.js + webpack to create command as follows:
vue init webpack xxx
Note 1: xxx create the project name for himself
Note 2: You must install vue, vue-cli, webpack, node and some other necessary environmental
2. Installation vue-cli
npm install -g vue-cli
npm install -g webpack
Note 1: After a successful installation will appear the following files
D:\initPath
node-v10.15.3-win-x64
node_global
view
vue.cmd
view-init
vue-init.cmd
vue-list
vue-list.cmd
Note 2: After installation is complete, open a command window and enter vue -V (note that this is a capital "V"), if the corresponding version number appears, the installation was successful.
3. Use the scaffolding vue-cli (2.X version) to build the project
Step one: Create a project using scaffolding skeleton
This step is understood to mean: using maven eclipse create a web project
cmd to open a command window
d: Switch to the disc d
cd d:\temp
Enter d: \ temp directory
vue init webpack spa1 This command creates a SPA project, it will generate a to "spa1" named folder in the current directory
spa1 is the project name, project name can not use Chinese or capital letters, then the terminal will be "a question and answer" mode (see Note 2)
Note 1: cmd command line window display Chinese garbled, mostly because cmd command line window does not match the lead character encoding
Modify window cmd character encoding UTF-8, the same command line: chcp 65001
Switch back to Chinese: chcp 936
These two commands only take effect in the current window, coding before restart recovery.
Note 2: "a question and answer" mode
1.Project name: project name, the default is the name of the spa1 when input directly enter
2.Project description: project description, just press Enter
3.Author: author, just fill or just press Enter
4.Vue build: multiple-choice questions, the first general election
4.1 Runtime + Compiler: recommended for most users // add compiler run, the official recommendation, chose it
4.2 Runtime-only: about 6KB lighter min + gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue filesrender functions are required elsewhere // run only when there are already recommended to choose the first
5. Install vue-router: whether vue-router, Y choosing, thus generated will have good project profiles associated routing
6.Use ESLint to lint your code: whether to use ESLint to limit your code and style errors. N novice would not have, but the actual projects usually use, so that people can achieve development consistent syntax
7.Set up unit tests: Test whether the mounting unit N
8.Setup e2e tests with Nightwatch ?: N test whether the installation e2e
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself // multiple-choice questions: the first option "Yes, use NPM" whether npm install install dependencies
Enter to select all had a good build the project, appeared the following represents the completion of the project creation
Project initialization finished!
========================
It will not vote, you select Enter the "default" or select "N" is not installed
Step Two: After you run the above command, we need to change the current path to the SPA within this folder, and then install the required modules
This step is understood to mean: after maven web project successfully create, modify, add dependencies pom file
cd spa1 # spa1 change the path to the folder
npm npm install # install module all the items needed
Step three: Start and access project
This step is understood to mean: start tomcat, and access the project through a browser
cd spa1
npm run dev
Note 1: After a successful start, open your browser and enter "http: // localhost: 8080" to
Note 2: vue-cli construction projects in the console npm run dev startup, the default debug address is port 8080, but most of the time,
We have developed several projects in parallel, may have been occupied port 8080, so port numbers related to how to change the debug address the
config -> index.js file
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxy table: {}
host: 'localhost',
port: 8088, // modify the port number here
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
},
Step four: stop the project added element-ui module
cd spa1
npm install element-ui -S
-S is the abbreviation -save
Note 1: Use vue + elementUI create SPA project, its project structures in general as follows:
Vue ESLint + + + webpack element ES6 +
Vue: main frame
ESLint: Help us to check syntax errors when the Javascript programming, so many people in a development project, to achieve consistent syntax
Webpack: set the proxy, plug-ins and various file loader processing and related functions, packaging and other functions. Throughout the project core configuration
elementUI: vue frame is based on a set of patterns, there are many styles packaged assembly
ES6: full name ECMAScript6.0, JavaScript is the next version of the standard, version 2015.06 hair
4. package.json Detailed
The root of each of the following items, in general, a package.json file that defines the various modules needed for this project,
And configuration information items (such as name, version, license and other metadata). npm install command based on the configuration file,
Automatically download the required modules, which is required to configure and run the project development environment
For details, see information "package- Detailed .json" Relevant comments
5. npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的区别
5.1 npm install
Download "package.json" in dependencies and devdependencies configured all dependent modules, and saved to the project directory node_modules
Note 1: git clone project, the project file and folder no node_modules, why?
5.2 npm install xxx -g
Global installation, downloading dependencies module, and saved to% node_home% \ under node_global \ node_modules directory
5.3 npm install xxx -S
Package.json written to the dependencies of the object, and save it to node_modules directory project
5.3 npm install xxx -D
DevDependencies written to the target package.json and save to directory project node_modules
Note 1: git clone project, the project file and folder no node_modules, why?
We know this file (project_home \ node_modules) saved our project development is dependent on the module used. This folder may have hundreds of megabytes of size,
If placed on github, when others clone will be very slow, this time to think of using a configuration file package.json rely solve this problem.
So that everyone Download this project, only need to enter the project directory directly npm install npm will go to the inside of the library needed is dependent.
Note 2: The acronym stands for command, attention to the case, -S, -D all uppercase i / install
-S/--save
-D/--save-dev
-g/--global
Note 3: package.json file inside devDependencies objects and dependencies What difference does it make? devDependencies inside the plug-in is used only for development environments, not in production environments, and dependencies are required to publish to the production environment.
For example: gulp, babel, webpack usually aids should be used to install --save-dev development environment
For example: vue, react, should be used to install a production environment --save
6 . VUE Project Structure Description
build folder This folder is mainly some configuration of webpack
webpack.base.conf.js webpack basic configuration, development environment, production environments rely
webpack.dev.conf.js webpack development environment configuration
webpack.prod.conf.js webpack production environment configuration
build.js production environment build script vue-loader.conf.js This file is the configuration file is processed .vue file
config folder
dev.env.js configure the development environment
prod.env.js configure the production environment
index.js this file to configure the proxy server, for example: port number changes
The installation package node_modules folder configuration package.json npm generated during storage of the install folder npm
src folder source directory (the development of the most frequently used folders)
assets shared styles, pictures
components business code storage place, which is divided into a storage components, is a component of a page, a page which will be wrapped in a lot of components
router routing settings
App.vue vue file entry interface
main.js correspond App.vue create vue instance, it is also an entry file, the corresponding entry in the configuration webpack.base.config.js
static files in folders will not pass webpack processing, can be directly quoted, for example, if you want to reference swf file can be configured webpack
Swf file loader to handle the extension, you can also directly swf files into that folder references
package.json This document has two parts to be useful: scripts and commands which set the dependencies and devDependencies in
Corresponding global and local download to download dependencies
7. What is * .vue file
* .Vue file, is a custom file type, described by a syntax similar to HTML Vue assembly.
Each file contains three types of .vue top language block <template>, <script> and <style>.
The three parts representing the html, js, css.
Note 1: can not be directly wrapped in the html code <template> </ template>, but instead all the code necessary to wrap side opposite the inside a html tag.
Generally the use of <div> </ div> tag contains other codes (to ensure that only one root element)
<template>
<div>...</div>
</template>
Note 2: js code is written in the <script> tag, and derived by export
<script>
export default {name: 'App'
}
</script>
Note 3: The wording of the same style as before
8. Integrated Case
Write a simple case of nested routes, primarily to create and modify the following files:
About.vue
<template> <div> <router-link to="/AboutMe">关于博主</router-link> <router-link to="/AboutWebSite">关于网站</router-link> <router-view/> </div> </template> <script> export default{ data(){ return { }; } } </script> <style> </style>
AboutMe.vue
< Template > < div > display blogger profile </ div > </ Template > < Script > Export default { Data () { return { }; } } </ Script > < style > </ style >
AboutWebSite.vue
< Template > < div > display the website development history </ div > </ Template > < Script > Export default { Data () { return { }; } } </ Script > < style > </ style >
Home.vue
<template> <div> 显示博客内容 </div> </template> <script> export default{ data(){ return { }; } } </script> <style> </style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebSite from '@/components/AboutWebSite'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/About',
name: 'About',
component: About,
children: [{
path: '/AboutMe',
name: 'AboutMe',
component: AboutMe
},
{
path: '/AboutWebSite',
name: 'AboutWebSite',
component: AboutWebSite
}
]
}
]
})
App.vue
<template> <div id="app"> <!--<img src="./assets/logo.png">--> <router-link to="/Home">首页</router-link> <router-link to="/About">关于</router-link> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Results are as follows:
；