vue 項目:文件夾 結構 、配置詳解

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

1.?項目配置

首先,在確定好使用的框架和組件庫后,先要大致了解它們,做到文檔基本熟悉。本次開發使用到的有: vue , vuex , axios , elementUI 。

然后可以按官方指引,使用 vue-cli 搭建 vue 的項目,在項目里按照上面的文檔嘗試修改,加深理解:

?

1

2

3

4

5

6

7

8

9

10

11

12

# 安裝依賴庫,建議指定 vue 和 element 版本,避免版本升級帶來意料之外的 bug

$ npm install vue@2.1.6 element-ui@1.4.6 vuex axios

#全局安裝腳手架

$ npm install -g vue-cli

# 創建一個基于 webpack 模板的新項目my-project

$ vue init webpack my-project

# 進入項目目錄

$ cd my-project

# 安裝依賴

$ npm install

# 運行項目

$ npm run dev

運行之后,看到以下頁面表明項目環境搭建成功:

2. 項目結構

搭建成功后,使用編輯器打開項目目錄,大致是這樣的結構:

相關文件和文件夾的含義:

  • build 文件夾: 里面是對 webpack 開發和打包的相關設置,包括入口文件、輸出文件、使用的模塊等;
  • config 文件夾: 主要是指定開發和打包中的靜態資源路徑、要壓縮的文件類型、開發使用的端口號、開發使用虛擬服務器跨域請求 api 等。
  • node_modules: 項目的依賴庫;
  • src 文件夾: 我們主要操作的地方,組件的增加修改等都在這個文件夾里操作,下文會有詳細介紹;
  • static 文件夾: 靜態資源文件夾,放置不會變動的資源,直接被復制到最終的打包目錄(默認是dist/static)下;
  • .babelrc: 使用 babel 的配置文件,用來設置轉碼規則和插件;
  • .editorconfig: 代碼的規范文件,規定使用空格或 tab 縮進,縮進的長度是兩位還是四位之類的代碼風格,使用的話需要在編輯器里下載對應的插件;
  • .eslintignore: 指定 eslint 忽略的文件;
  • .eslintrc: 配置 eslint 的檢測規則,強制按照規則書寫代碼;
  • .gitignore: 指定 git 忽略的文件,所有 git 操作均不會對其生效;
  • .postcssrc: 指定使用的 css 預編譯器,里面默認配置了 autoprefixer ,自動補全瀏覽器前綴;
  • favicon.ico: 瀏覽器標簽頁 title 旁邊的小圖標,這是需要我們自己粘貼過來的;
  • index.html: 首頁文件,項目運行的時候,會自動將我們在 src 文件夾里生成的組件插入這個文件里;
  • LICENSE: 項目聲明的 license;
  • package-lock.json: 當 node_modules 或 package.json 發生變化時自動生成的文件。這個文件主要功能是確定當前安裝的包的依賴,以便后續重新安裝的時候生成相同的依賴,而忽略項目開發過程中有些依賴已經發生的更新;
  • package.json: 指定項目開發和生成環境中需要使用的依賴庫;
  • README.md: 相當于是一個備注文件,對項目開發過程中需要注意的地方進行一些說明。

3. src 文件夾結構

src 文件夾里的文件夾設置是靈活的,可以根據自己的習慣進行,不必雷同。下面是這次項目的結構:

  • assets: 放置靜態資源,包括公共的 css 文件、 js 文件、iconfont 字體文件、img 圖片文件 以及其他資源類文件。之所以強調是公共的 css 文件,是因為要在組件的 css 標簽里加入 ‘scoped‘ 標記,將其作用范圍限制在此組件以及調用它的父級組件中,避免污染全局樣式;
  • components: 放置通用模塊組件。項目里總會有一些復用的組件,例如彈出框、發送手機驗證碼、圖片上傳等,將它們作為通用組件,避免重復工作;
  • http: 放置與后臺 api 相關的文件。這里面有 axios 庫的實例配置文件、使用配置的 axios 實例接入 api 獲取數據的函數的集合的文件;
  • mixins: 放置混合選項的文件。具體來說,相當于是公用函數的集合,在組件中引用時,可以作用于組件而不必書寫重復的方法;
  • pages: 放置主要頁面的組件。例如登錄頁、用戶信息頁等。通常是這里的組件本身寫入一些結構,再引入通用模塊組件,形成完整的頁面;
  • router: 放置路由設置文件,指定路由對應的組件;
  • store: 放置 vuex 需要的狀態關聯文件,設置公共的 state、mutations 等;
  • App.vue: 入口組件,pages 里的組件會被插入此組件中,此組件再插入 index.html 文件里,形成單頁面應用;
  • main.js: 入口 js 文件,影響全局,作用是引入全局使用的庫、公共的樣式和方法、設置路由等。

轉自:?https://www.jb51.net/article/130508.htm

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448148.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448148.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448148.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

hdoj2553(N皇后問題)

Problem : 2553 ( N皇后問題 ) Judge Status : Accepted RunId : 2619754 Language : G Author : huwenbiao Code Render Status : Rendered By HDOJ G Code Render Version 0.01 Beta/***************************************************************\ *Author:Hu…

基于java的數據結構學習——數組實現的棧以及簡單應用C++實現

基于java的數據結構學習——數組實現的棧以及簡單應用的 C 實現 源碼: // // Created by PC-Saw on 2019/1/3. //#ifndef DATA_STRUCTURE_ARRAYSTACK_H #define DATA_STRUCTURE_ARRAYSTACK_H#include "Stack.h" #include "MyArray.h"template&…

女性開車5大安全駕車好習慣 為您支招

一些女性車主技術不夠熟練,緊急處理能力差,開車過程中需要注意更多的細節。養成一些好習慣,對于女性車主來說,開車的安全度會大大提高。 ● 車窗上不掛毛絨玩具 汽車是生活的一部分空間,許多女性車主都喜歡把這部分空間…

DIV 半透明層、 CSS實現網頁 背景半透明

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 DIV半透明實現,使用CSS實現DIV成半透明效果,CSS實現層與背景半透明效果。 一、DIV CSS半透明基礎介紹 - …

node 安裝 webpack

首先要安裝 Node.js, Node.js 自帶了軟件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建議使用最新版 Node.js。 用 npm 安裝 Webpack: $ npm install webpack -g此時 Webpack 已經安裝到了全局環境下,可以通過命…

Thinking in C++遇到的函數指針及應用

// // Created by PC-Saw on 2019/1/24. //#include <iostream>#define TEST 2/* 1. */ typedef int* (*(*fp1)(int))[10]; // 首先是一個函數指針&#xff0c;接受一個int型參數&#xff0c;返回一個指向10個int指針數組的指針 /* 2. */ typedef i…

html 標簽內背景圖片自適應 div 大小

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 只需通過css設置background-size屬性為contain&#xff0c;即 background-size:contain 注意&#xff1a;一定要在先設置background之…

Code Project精彩系列(轉)

Code Project精彩系列&#xff08;轉&#xff09; Applications Crafting a C# forms Editor From scratch http://www.codeproject.com/csharp/SharpFormEditorDemo.asp 建立一個類似C#的環境, 實現控件拖拉&#xff0c;屬性 Packet Capture and Analayzer 網絡封包截獲 http…

加速時如何換擋

加速時如何換擋&#xff0c;您知道嗎?為了使換擋過程順利進行&#xff0c;變速器內齒輪平穩嚙合&#xff0c;必須掌握好發動機轉速&#xff0c;在適當時機推動變速桿操縱齒輪嚙合。為此&#xff0c;要通過反復練習&#xff0c;一邊踩踏油門踏板&#xff0c;一邊聽發動機運轉聲…

C++ 學習雜談:sizeof和sizeof(string)的問題

最近遇到一個令我困惑的問題&#xff0c;就是 sizeof&#xff08;string&#xff09;的值&#xff0c;之前在vs2010上測得是固定28&#xff0c;最近在用CLion&#xff0c;上面測得是4&#xff0c;出現了不一樣的結果&#xff0c;我又在vs2013上試了一下&#xff0c;結果又不一樣…

vue 項目 引用(外部) js、css

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 我的工程結構&#xff1a; 1. 引入 css 有 2 種方式&#xff1a; 方式 1 <script type"text/javascript">import .…

FAQ:Container Classes篇

1、Why should I use container classes rather than simple arrays?&#xff08;為什么應該使用容器類而不是簡單的數組&#xff1f;&#xff09; In terms of time and space, a contiguous array of any kind is just about the optimal construct for accessing a sequen…

自動擋車擋位的基本知識介紹

一般來說&#xff0c;自動檔汽車的自動變速器的檔位分為P、R、N、D、2 (或S)、L(或1)等。下面分別詳細介紹如下&#xff1a; P (Parking) 停車檔&#xff0c;或稱泊車檔&#xff1a; P用作停車之用&#xff0c;它是利用機械裝置去鎖緊汽車的轉動部分&#xff0c;使汽車不能移動…

Java 強引用、弱引用、軟引用、虛引用

1、強引用&#xff08;StrongReference&#xff09; 強引用是使用最普遍的引用。如果一個對象具有強引用&#xff0c;那垃圾回收器絕不會回收它。如下&#xff1a; Object onew Object(); // 強引用 當內存空間不足&#xff0c;Java虛擬機寧愿拋出OutOfMemoryError錯誤…

解決:(iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8082 -j DNAT --to-destin

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 用 docker 部署一個前端工程&#xff0c;run 后容器有了&#xff0c;卻不是運行狀態&#xff0c;是創建狀態&#xff0c;于是我執行 …

在DOS命令行執行MYSQL語句

最近有個工作需要從MSSQL庫中取數據然后導入SQL 2005。由于之前曾經做過利用BCP導入SQL&#xff0c;因此想借助這個工具實現此功能。 在探索過程中&#xff0c;好像發現MYSQL不能想SQL那樣有OSSQL這樣的外部命令。因此想到利用MYSQL執行文件內容的功能來生成導出數據。&#xf…

無損壓縮——Huffman編碼

最近項目中涉及到人臉關鍵點中神經網絡的壓縮&#xff0c;采用了性能較好的哈夫曼編碼進行。 源碼地址&#xff1a;https://github.com/believeszw/HuffmanCompress 1 引言 哈夫曼&#xff08;Huffman&#xff09;編碼算法是基于二叉樹構建編碼壓縮結構的&#xff0c;它是數據…

26條安全開車經驗 開車20年老司機分享

總有些人&#xff0c;覺得自己開車技術比舒馬赫牛叉&#xff0c;市區高速漂移無比瀟灑。也總有些人&#xff0c;覺得路是自家的鋪的&#xff0c;愛怎么開就怎么開&#xff0c;愛停哪就停哪&#xff0c;哪個不服打開車窗就是一句國罵一個中指。其實他們都沒有意識到&#xff0c;…

解決:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 前端 vue 工程 post 請求后端接口&#xff0c;報錯&#xff1a; Request header field Content-Type is not allowed by Access-Con…

書寫README的各種markdown語法

README 該文件用來測試和展示書寫README的各種markdown語法。GitHub的markdown語法在標準的markdown語法基礎上做了擴充&#xff0c;稱之為GitHub Flavored Markdown。簡稱GFM&#xff0c;GFM在GitHub上有廣泛應用&#xff0c;除了README文件外&#xff0c;issues和wiki均支持…