Vue腳手架(vue-cli)搭建和目錄結構詳解

1、環境搭建

  一、安裝node、npm、webpack,很少說css

  二、安裝vue-cli腳手架構建工具,打開命令行工具輸入:npm install vue-cli -g,安裝完成以後輸入 vue -V(注意這裏是大寫的「V」),若是出現相應的版本號,則說明安裝成功。html

2、用vue-cli來構建項目

  一、在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄:(1)cd 目錄路徑 (2)若是以安裝git的,在相關目錄右鍵選擇Git Bash Herevue

  二、安裝vue腳手架輸入:vue init webpack exprice ,注意這裏的「exprice」 是項目的名稱,能夠說是隨便起名,可是須要注意的是「不能用中文,且不能用大寫字母」。node

$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令 This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目 For Vue 1.x use: vue init webpack#1.0 exprice ? Project name (exprice) ---------------------項目名稱 ? Project name exprice ? Project description (A Vue.js project) ---------------------項目描述 ? Project description A Vue.js project ? Author Datura --------------------- 項目建立者 ? Author Datura ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由,也就是之後是spa(但頁面應用須要的模塊) ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ---------------------是否啓用eslint檢測規則,這裏我的建議選no ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? (Y/n) ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "exprice". To get started: --------------------- 這裏說明如何啓動這個服務 cd exprice npm run dev

  三、cd 命令進入建立的工程目錄,首先cd exprice(這裏是本身建工程的名字),而後npm run dev,啓動服務器。服務啓動成功後瀏覽器會默認打開一個「歡迎頁面」,如圖。webpack

  注意:這裏是默認服務啓動的是本地的8080端口,因此請確保你的8080端口不被別的程序所佔用。git

3、目錄介紹

  建立完成的「exprice」目錄以下:es6

  簡單說明下各個目錄都是幹嗎的:web

  整體框架:一個vue-cli的項目結構以下,其中src文件夾是須要掌握的,因此本文也重點講解其中的文件,至於其餘相關文件,瞭解一下便可。vue-router

4、文件結構細分

  一、build——[webpack配置]vue-cli

  build文件主要是webpack的配置,主要啓動文件是dev-server.js,當咱們輸入npm run dev首先啓動的就是dev-server.js,它會去檢查node及npm版本,加載配置文件,啓動服務。

  二、config——[vue項目配置]

  config文件主要是項目相關配置,咱們經常使用的就是當端口衝突時配置監聽端口,打包輸出路徑及命名等

 

  三、node_modules——[依賴包]

  node_modules裏面是項目依賴包,其中包括不少基礎依賴,本身也能夠根據須要安裝其餘依賴。

  安裝方法爲打開cmd,進入項目目錄,輸入npm install [依賴包名稱],回車。

  在兩種狀況下咱們會本身去安裝依賴:

  (1)項目運行缺乏該依賴包:例如項目加載外部css會用到的css-loader,路由跳轉vue-loader等(安裝方法示例:npm install css-loader)

  (2)安裝插件:如vux(基於WEUI的移動端組件庫),vue-swiper(輪播插件)

  注:有時會安裝指定依賴版本,需在依賴包名稱後加上版本號信息,如安裝11.1.4版本的vue-loader,輸入npm install vue-loader@11.1.4

  四、src——[項目核心文件]

  項目核心文件前面已經進行了簡單的說明,接下來重點講解main.js,App.vue及router的index.js

 5、腳手架代碼詳解

   咱們看下建立後的項目目錄裏的主要文件:

  一、index.html——[主頁]

  這個沒什麼好說的,就是一個簡單的html頁面,這裏id='app',是爲後面的設置vue做用域有關的。

  index.html如其餘html同樣,但通常只定義一個空的根節點,在main.js裏面定義的實例將掛載在根節點下,內容都經過vue組件來填充

  二、文件:Hello.vue

  說明:在*.vue文件,template標籤裏寫html代碼,且template直接子級只能有一個標籤。style標籤裏寫樣式,script裏面寫js代碼。

  三、文件:App.vue——[根組件]

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/> //這裏是用來展現路由頁面內容的,若是想用跳轉就用<router-link to='xxx'></router-link>
  </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>

  一個vue頁面一般由三部分組成:模板(template)、js(script)、樣式(style):

  【template】

  其中模板只能包含一個父節點,也就是說頂層的div只能有一個(例以下圖,父節點爲#app的div,其沒有兄弟節點)

  <router-view></router-view>是子路由視圖,後面的路由頁面都顯示在此處。打一個比喻吧,<router-view>相似於一個插槽,跳轉某個路由時,該路由下的頁面就插在這個插槽中渲染顯示

  【script】

  vue一般用es6來寫,用export default導出,其下面能夠包含數據data,生命週期(mounted等),方法(methods)等,具體語法請看vue.js文檔,在後面我也會經過例子來講明。

  【style】

  樣式經過style標籤<style></style>包裹,默認是影響全局的,如需定義做用域只在該組件下起做用,需在標籤上加scoped,<style scoped></style>

  如要引入外部css文件,首先需給項目安裝css-loader依賴包,打開cmd,進入項目目錄,輸入npm install css-loader,回車。安裝完成後,就能夠在style標籤下import所需的css文件,例如:

<style> import './assets/css/public.css'
</style>

  這樣,咱們就能夠把style下的樣式封裝起來,寫到css文件夾,再引入到頁面使用,整個vue頁面也看上去更簡潔。

  四、文件:main.js——[入口文件]

  這個js文件是主頁面配置的主入口。主要是利用ES6的模塊化引入模板

  main.js主要是引入vue框架,根組件及路由設置,而且定義vue實例,下面代碼中的components:{App}就是引入的根組件App.vue

  後期還能夠引入插件,固然首先得安裝插件。

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue文件
import App from './App'// 引入同目錄下的App.vue模塊
import router from './router'// 引入vue的路由
 Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ el: '#app',//定義做用範圍就是index.html裏的id爲app的範圍內
  router,//引入路由
  components: { App },//註冊引入的組件App.vue
  template: '<App/>'//給Vue實例初始一個App組件做爲template 至關於默認組件
})

  五、router——[路由配置]

  router文件夾下,有一個index.js,即爲路由配置文件

import Vue from 'vue'  //引用vue文件
import Router from 'vue-router'  //引用vue路由模塊,並賦值給變量Router
import HelloWorld from '@/components/HelloWorld'  //英文HelloWorld.vue模版,並賦值給變量HelloWorld,這裏是「@」至關於「../」
 Vue.use(Router) //使用路由
 export default new Router({ routes: [ //進行路由配置,規定「/」引入到HelloWorld組件
 { path: '/', name: 'HelloWorld',  //這個name暫時不知道用啥用,根據官方文檔說的是方便排錯的
      component: HelloWorld  //註冊HelloWorld組件
 } ] })

  這裏定義了路徑爲'/'的路由,該路由對應的頁面是HelloWorld組件,因此當咱們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件

  相似的,咱們能夠設置多個路由,‘/index’,'/list'之類的,固然首先得引入該組件,再爲該組件設置路由。

  說明:若是須要增長組件那就在components文件下定義xx.vue文件並編寫代碼便可;若是須要配置路由就要在index.js進行路由「路徑」配置;還須要點擊跳轉就要用到<router-link></router-link>標籤了。

相關文章
相關標籤/搜索