Vue-cli 學習

Vue-cli是vue官方出品的快速構建單頁應用的腳手架

使用npm來安裝vue-cli，命令以下：

npm install vue-cli -g

-g：表示全局安裝。（npm是隨node.js安裝包一塊兒安裝的，關於這一部份內容能夠到：http://www.cnblogs.com/momei/p/7194089.html  進行了解）

安裝完成後，可使用  vue -V 來查看 vue-cli 版本，版本正確顯示，則證實 vue-cli 已安裝成功，能夠開始接下來的學習了。

初始化項目

vue init命令初始化項目：

vue init template-name project-name

template-name：表示模板名稱，vue-cil 官方提供了5種模板。

• webpack：一個全面的 webpack + vue - loader 的模板，功能包括熱加載，linting，檢測和css擴展。
• webpack-simple：一個簡單的 webpack + vue - loader 模板，不包含其餘功能，讓你快速的搭建vue的開發環境。
• browserify：一個全面的Browserify + vueify 的模板，功能包括熱加載，linting，單元檢測。
• browserify-simple：一個簡單的Browerify+vueify的模板，不包括其餘功能，讓你快速的搭建vue的開發環境。
• simple：一個最簡單的單頁應用模板。

project-name：表示項目名稱，根據本身的項目名稱來填寫。

在實際開發中，通常使用webpack模板，安裝命令以下：

vue init webpack vueObject

回車後，會詢問幾個選項，根據本身的須要進行填寫。

Project name：項目名稱，若是不須要更改直接回車。這裏填寫的項目名稱一概使用小寫。

Project description：項目描述，默認爲A Vue.js project直接回車。

Author：做者，若是有配置git做者，它會自動讀取。

Install vue-router：是否安裝vue的路由插件，通常都須要安裝，選擇Y。

Use ESLint to lint your code：是否有ESLint來限制你的代碼錯誤和風格。通常在大型團隊須要。

steup unit tests with Karnma + Mocha：是否須要安裝單元測試工具 karma + Mocha。通常在大型團隊須要。

Setup e2e test with Nightwatch：是否安裝e2e來進行用戶行爲模擬測試。通常在大型團隊須要。

以上信息完成後，vue-cil 出現命令提示：

1. cd vueobject :進入vue項目。
2. npm install：安裝項目依賴包package.js。
3. npm run dev 運行程序。

完成以上操做，會打開一個網頁顯示vue的圖標及其文字信息。

vue-cli 項目結構

package.json：項目根目錄下的文件，定義項目開發所須要的模塊以及一些配置信息。

packsge.json裏的script字段：定義了能夠用npm運行的命令

"scripts": {
   "dev": "node build/dev-server.js",
   "build": "node build/build.js"
},

dependencies 字段和 devDependencied 字段：

• depandencies 字段指項目運行時因此來的模塊；
• devDependencies 字段指定了項目開發所依賴的模塊

在命令行中運行npm install命令，會自動安裝dependencies和devDempendencies字段中的模塊。

webpack配置相關內容：

運行npm run dev 就至關於執行了node build/dev-server.js。重點閱讀此文件夾。

.babelrc ：存放在根目錄下，babelrc是一個轉碼器，將ES6代碼轉化爲ES5。

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

.editorconfig：定義項目的規範編碼。

root = true
 
[*]    // 對全部文件應用下面的規則
charset = utf-8                    // 編碼規則用utf-8
indent_style = space               // 縮進用空格
indent_size = 2                    // 縮進數量爲2個空格
end_of_line = lf                   // 換行符格式
insert_final_newline = true        // 是否在文件的最後插入一個空行
trim_trailing_whitespace = true    // 是否刪除行尾的空格

vue-cil 模板

家下來了解vue-cli的模板操做，包括增長模板和修改模板。

npm run build 命令：執行該命令vue-cli會自動進行項目打包，打包完成後在項目的根目錄下生成dist文件。

dist  文件包含：

• index.html  主頁文件，由於開發是單頁web應用，因此通常只有一個html文件。
• static  靜態資源文件：css、圖片、js。

src文件下的  main.js：是整個項目的入口文件。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

這裏引入了App組件和</App>模板，是經過import App from './App' 代碼引入

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></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>

router/index.js 路由文件：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

咱們能夠看到 import Hello from ‘@/components/Hello’這句話， 文件引入了/components/Hello.vue文件。這個文件裏就配置了一個路由，就是當咱們訪問網站時給咱們顯示Hello.vue的內容。

Hello.vue 文件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

 

以上即是 vur-cli的一些基本知識，更深刻的瞭解須要項目的磨練，願每一個實踐者都有所得，也有更多的機會去運用。