vue啓動流程

繼上一篇vue環境的搭建（在D盤新建文件夾vue_cli，把（我已經上傳到了文件下）資料下tpls解壓完後的全部文件都複製到D盤vue_cli下）

目錄如圖：

一、webstorm設置
爲了提升webStrom在Vue項目中響應速度，設置：
選中項目，點擊右鍵，mark directory as,excluded

進入到CLI：
windows+R
cmd

d:
cd vue_cli
npm run dev

二、介紹單文件組件概念
文件擴展名爲 .vue 的 single-file components(單文件組件) ；
有3個標記：template(是html) script（組件的設置） style（樣式的設置）

三、vue項目啓動流程

在執行npm run dev的時候，會去在當前文件夾下的項目中找package.json文件,啓動開發服務器，默認端口是8080；

找到src的main.js文件，在該文件中new Vue的實例，要加載的模板內容App，App是src目錄下的App.vue結尾的文件，在App.vue所對應的模板當中，有一個router-view

在src目錄下有一個router文件夾，該文件夾有個index.js文件，該文件是配置路由詞典，指定了路由地址是空，加載Hello組件

四、使用Vue的組件

步驟1：建立.vue結尾的文件
MyHeader.vue
步驟2：建立組件
在main.js文件中，
①引入要使用的組件
import MyHeader from '@/components/MyHeader'
②建立組件
Vue.component('my-header',MyHeader)
步驟3：使用組件
MyList.vue
<template>
<my-header> </my-header>
</template>

五、Vue項目 如何 部署在真正的服務器端

在工程所在的目錄中，執行npm run build，
會生成一個dist的文件夾

就是咱們能夠直接部署（deploy）在服務器端的文件。

 

例如：hello.vue文件中：

從vue引入Vue

import Vue from 'vue'

從js文件vue-router引入Router

import Router from 'vue-router'

從路徑components/Hello蝦引入Hello（@是路徑……）
import Hello from '@/components/Hello'

Vue.vue  Router.vue……都省去了.vue

Router是路由模塊，便可以使用路由模塊

Vue.use(Router)

導出配置路由

export default newRouter

注意：通常在assets下方css，js，img，fonts等須要的文件……