vue-cli入門（二）——項目結構

時間 2019-11-10

標籤 vue cli 入門項目結構简体版

原文原文鏈接

前言

在上一篇項目搭建文章中，咱們已經下載安裝了node環境以及vue-cli，而且已經成功構建了一個vue-cli項目，那麼接下來，咱們來梳理一下vue-cli項目的結構。css

整體框架

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

文件結構細分

1.build——[webpack配置]

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

2.config——[vue項目配置]

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

3.node_modules——[依賴包]

node_modules裏面是項目依賴包，其中包括不少基礎依賴，本身也能夠根據須要安裝其餘依賴。安裝方法爲打開cmd，進入項目目錄，輸入npm install [依賴包名稱],回車。webpack

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

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

（2）安裝插件：如vux（基於WEUI的移動端組件庫），vue-swiper（輪播插件）vue-router

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

4.src——[項目核心文件]

4.1 index.html——[主頁]

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
      <!-- 定義的vue實例將掛載在#app節點下 -->
    <div id="app"></div>
  </body>
</html>

4.2 App.vue——[根組件]

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

<!-- 模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<!-- script -->
<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>

【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頁面也看上去更簡潔。

4.3 main.js——[入口文件]

main.js主要是引入vue框架，根組件及路由設置，而且定義vue實例，下面的

components:{App}就是引入的根組件App.vue

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

/*引入vue框架*/
import Vue from 'vue'
/*引入根組件*/
import App from './App'
/*引入路由設置*/
import router from './router'

/*關閉生產模式下給出的提示*/ 
Vue.config.productionTip = false

/*定義實例*/ 
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

4.4 router——[路由配置]

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

/*引入vue框架*/
import Vue from 'vue'
/*引入路由依賴*/
import Router from 'vue-router'
/*引入頁面組件，命名爲Hello*/ 
import Hello from '@/components/Hello'

/*使用路由依賴*/ 
Vue.use(Router)

/*定義路由*/ 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。