1. Why is the file you want to use a single project?
1, Vue.js convenient routing component
It does not support referencing HTML page that template which defines the label when the string editor, which makes editing difficult to change.
2, Vue.js in Node.js binding language
2, build Vue project environment
2.1. Installation Node.js
Simply put Node.js is running on the server side JavaScript .
Node.js is based on Chrome JavaScript a platform is built at runtime.
Node.js is an event-driven I / O server-side JavaScript environment, based on Google 's V8 engine, V8 engine performs Javascript speed is very fast, very good performance.
In installing Node.js on Windows is easy, just visit the official website node.js HTTP: // the WWW .nodejs.org /, click on the Download link , and then select Windows Installer, download the installation package . Once downloaded simply double-click installation, and other general software installation as
2.2. Installation Webpack
Webpack is node.js a component.
WebPack can be seen as a packer module: it to do is to analyze your project structure, find JavaScript expand language (module and some other browsers can not run directly Scss , the typescript , etc.), and wraps them suitable format for browsers.
Installation command:
npm install webpack -g --registry=https://registry.npm.taobao.org
-g represents the global installed
Because node.js component library location in a foreign country, so when domestic installation will be very slow, so mirroring methods can be used to install (using Taobao image library https --registry =: //registry.npm.taobao.org
）
2.3. Installation vue-cli
Vue-cli is a build tool, he can greatly reduce webpack difficulty of use, support hot update.
vue-cli is vue.js scaffolding, used to automatically generate vue.js + webpack project templates, divided into vue init webpack-simple project name and vue init webpack name two kinds of projects.
Installation command:
Elevation install vue-cli g --registry = https: //registry.npm.taobao.org
2.4. Creating Project
Into the project you want to create a folder, enter the following command.
command:
vue init webpack my--project
2.5. Startup Items
command:
npm install
- npm install is used to install package.json assembly, similar to C # inside packages.config , performed only once
npm run dev
- Run
3, Project Contents Introduction
3.1. Static directory
It is stored in static files, such as fonts and pictures.
3.2. Build directory
Store the code file the final release.
3.3. Config directory
Store configuration files.
3.4. Src / Assets directory
File storage material.
3.5. Src / Components directory
Storage component files.
3.6. Src / Router directory
Storage routing file.
3.7. Package.json directory
Library and version information for installed items. Npm install command which is installed inside the library.
After the installation of the components into a directory node_modules in.
3.8. Index.html directory
Some students asked, why not introduce this page we learn before vue.js documents?
We should note that we are from this single project file node.js managed by node.js loads vue.js , developers do not need special reference vue.js .
Then we generate vue objects are created and where it?
The answer is in main.js in
Here's a template template name App, then we will be able to find this App.vue
4, create vue sample files
4.1. Creating vue file
Note: tag <template> below and only a label, not a plurality, a plurality of error.
Error message:
4.2. Configuring Routing
4.3. View results
5, unit testing
5.1. Mocha ( magic card ) testing framework
Mocha born since 2011 , is now the most popular JS one testing framework, the browser and Node can use environment.
The so-called test framework, is the tool to run tests. Through her, you can JS application to add tests to ensure the quality of the code.
Create a single-page application before the time chose Mocha testing framework, so no need to install.
Test file is located in / test / unit / specs in.
Run tests:
operation result:
