9. The first vue-cli project

1. What is vue-cli

　　Vue-cli a scaffolding provided by the official, used to quickly generate a vue project templates;

　　Pre-defined directory structure and the underlying code, like when we create Maven project can choose to create a skeleton project, this project is the scaffolding framework, our developers more quickly;

The main function:

• Unified directory structure
• Local Debugging
• Hot deployment
• unit test
• Integrated on-line package

2. The need for environment

• Node.js : http://nodejs.cn/download/

• Git : https://git-scm.com/downloads

Nodejs confirm whether the installation was successful:

• input under cmd  node -v, see if can correctly print publication of this number can be!
• input under cmd  npm-v, see if can correctly print publication of this number can be!

Taobao mirror installed Node.js accelerator (cnpm):

. 1  # is global mount -g
 2  npm the install CNPM -g
 . 3  
. 4  # or using a statement to solve the problem of slow npm
 . 5 npm the install --registry = HTTPS: //registry.npm.taobao.org

Installation vue-cli:

1  CNPM install vue-cli -g
 2  
3  # test whether the installation was successful
 4  # to see what you can create a template vue-based applications, we usually choose WebPACK
 5 vue List

3. The first application vue-cli

1. Use cmd in the folder, create a project named myvue of vue and packaging tools packaged with webpack

1  # myvue here is the name of the project, named according to their needs can be
 2 VUE the init WebPACK myvue

Description:

• Project name: project name, press Enter to default
• Project description: project description, the default press Enter
• Author: Author project, the default press Enter
• Install vue-router: is installed vue-router, choose not to install n (need to manually add the late)
• Use ESLint to lint your code: whether to use ESLint do code inspections, n choose not to install (the latter need to be added manually)
• Set up unit tests: unit tests related, choose not to install n (the latter need to be added manually)
• Setup e2e tests with Nightwatch: unit testing related, choose not to install n (need to manually add the late)
• Should we run npm install for you after the project has been created: to create a direct initialization is complete, select n, we performed manually; operating results!

2. Initialize and run the project myvue

1 cd myvue
2 npm install
3 npm run dev

3. Install and run successfully in a browser enter: HTTP: // localhost : 8080

4. Directory Structure Analysis vue-cli

• build and config: WebPack profile
• node_modules: used to store installation npm install dependencies
• src: source directory project
• static: static resource files
• .babelrc: Babel profile, the main role is to convert ES5 ES6
• .editorconfig: Configuration Editor
• eslintignore: need to ignore the grammar checker profile
• .gitignore: git ignore profile
• .postcssrc.js: css configuration file, which is inside the module.exports NodeJS modular grammar
• index.html: Home, only as a template page, do not use the actual development

• package.json: project configuration files

  • name: Project name
  • version: Project Versions
  • description: Project Description
  • author: Project Author
  • scripts: Package common commands
  • dependencies: a production environment dependent
  • devDependencies: development environment dependent

5. Analyze src directory

src directory: project source directories, all of the code will be written here

main.js: entry file project, we know that all programs will have an entrance

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 
 6 Vue.config.productionTip = false
 7 
 8 /* eslint-disable no-new */
 9 new Vue({
10   el: '#app',
11   components: { App },
12   template: '<App/>'
13 })

Description:

• mport Vue from 'vue': ES6 written, it will be converted to require ( "vue"); (require NodeJS is to provide a module loader)
• import App from './App': Meaning as above, but specifies the search path, / is the current directory.
• Vue.config.productionTip = false: Close the browser console to know about the environment

• new Vue({...}): Examples of Vue

  • el: '#app': Find index.html with id element of the app
  • template: '<App/>': Template, will in index.html <div id = "app"> </ div> Replace <App />
  • components: { App }: Introduction means, using the import App from './App' App component definitions;

App.vue: index.html component called in

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png">
 4     <HelloWorld/>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import HelloWorld from './components/HelloWorld'
10 
11 export default {
12   name: 'App',
13   components: {
14     HelloWorld
15   }
16 }
17 </script>
18 
19 <style>
20 #app {
21   font-family: 'Avenir', Helvetica, Arial, sans-serif;
22   -webkit-font-smoothing: antialiased;
23   -moz-osx-font-smoothing: grayscale;
24   text-align: center;
25   color: #2c3e50;
26   margin-top: 60px;
27 }
28 </style>

Description:

• template: HTML code template, will replace the contents of <App /> in
• import HelloWorld from './components/HelloWorld': introducing HelloWorld assembly that replaces the template <HelloWorld />

• export default {...}: NodeJS derived objects, is to be introduced through the import keyword

  • name: 'App': the name of the custom component
  • components: {HelloWorld}: definition of subassembly

HelloWorld.vue：

. 1  < Template > 
2   < div > {{MSG}} </ div > 
. 3  </ Template > 
. 4  
. 5  < Script > 
. 6  Export default {
 . 7    name: ' the HelloWorld ' ,
 . 8    Data () {
 . 9      return {
 10        MSG: ' this is my first Vue item ' 
. 11      }
 12 is    }
 13 is  }
 14  </ Script > 
15 
16 <!-- Add "scoped" attribute to limit CSS to this component only -->
17 <style scoped>
18 h1, h2 {
19   font-weight: normal;
20 }
21 ul {
22   list-style-type: none;
23   padding: 0;
24 }
25 li {
26   display: inline-block;
27   margin: 0 10px;
28 }
29 a {
30   color: #42b983;
31 }
32 </style>

Description:

•  < Style scoped >  : CSS Style valid only in the current assembly, the style statement of scope, the current interface is private!