如何用vue cli初始化乙個vue專案

2022-08-25 18:06:23 字數 2314 閱讀 1015

解析打包.vue檔案

vue為了能夠使我們在專案開發中對元件進行更好的維護,提供了乙個單檔案元件系統,vue把每乙個獨立的元件放在乙個.vue的檔案中,在這個檔案中提供基礎三個自定義標籤:

1. template

2. script

3. style

來放置元件不同的內容塊,但是因為瀏覽器不能夠直接去識別該檔案型別,所以我們需要通過webpack來進行編譯打包,官方提供了乙個對 .vue 進行處理的loader:vue-loader

error in ./src/hello.vue

module build failed: error: cannot find module 'vue-template-compiler'

vue實際開發使用 .vue 的單元件系統來實現,但是不能適應實際複雜的需求,我們還需要配置很多的一些東西來和 .vue 進行融合,這個配置很繁瑣,所以官方提供了乙個工具,幫助我們來構建乙個專案開發過程中必須使用的一些內容,這個工具:vue-cli,通過這個工具我們就可以很方便的來建立乙個基於vue的專案,我們也把這個工具稱為---腳手架

npm install vue-cli -g(全域性)

或yarn global add vue-cli

當我們通過上述方式安裝好vue的腳手架以後,我們就可以在命令列中使用乙個命令:vue(該命令是沒有-cli的)

vue init

init:初始化(建立)基於vue的專案

:構建模板的名稱:常用的是 webpack,其他的可以參考:

:要構建的專案的名稱

vue init webpack hello:基於webpack來構建乙個名稱為hello的vue專案(專案構建一定要聯網!聯網!聯網!)

vue-cli是乙個互動式命令列,通過vue命令構建專案會需要我們填寫一些專案的資訊:

project name:要建立的專案名稱(該命令會生產乙個package.json檔案,檔案中的name選項就是這個projectname,預設為當前建立的專案目錄名稱,也可以自行制定(但是需要符合package.json中name命名規則,不要出現大寫字母,空格,下劃線,可以使用 - )

project description:專案簡介,也會出現在package.json檔案中,可選

author:作者,可選

下一步直接回車

install vue-router:是否安裝vue路由元件,做專案的話一定要安裝

use eslint to lint your code:是否需要使用eslint模組進行**檢測

setup unit tests with karma + mocha?:是否安裝測試(單元測試)

setup e2e tests with nightwatch?:是否安裝端到端的測試

完成上面步驟,over!

dependencies:專案中實際需要使用到的依賴包

devdependencies:專案開發過程中需要使用的一些工具包,不是專案實際線上**的一部分

所需要的安裝依賴包安裝完成以後,就可以啟動專案,執行

yarn run dev / npm run dev:開啟乙個測試開發環境

yarn run build : 構建專案,把專案進行打包,我們可以把專案打包後的檔案上傳到伺服器

如果是首次執行,那麼會看到乙個歡迎頁面,下面我們就可以進行專案開發

dist目錄:專案編譯構建上線後的存放目錄

node_modules目錄:專案依賴包存放目錄

src目錄:專案源**存放目錄

static目錄:靜態資源存放目錄

在專案開發過程中,我們的大部分任務是在src這個目錄下完成的

當我們的應用變得複雜了以後,涉及到的頁面也會變多,邏輯也會變複雜,原來我們是通過多頁面的方式來組織和維護我們的**,但是這樣的使用者體驗不是太好(因為會重新整理或跳轉頁面),為了解決使用者體驗問題,最好的方式,資料(頁面會發生變化),但是不需要跳轉、重新整理。

什麼情況下獲取資料渲染頁面?傳統的處理方式:通過url重新傳送請求得到新的資料和頁面,獲取什麼頁面資料由url來決定,使用了單頁面開發模式的話,就不能再使用頁面跳轉,但是可以使用url中的hash值的變化來決定獲取什麼內容渲染什麼頁面。

所以乙個url的hash對應乙個檢視,那麼我們就需要設定hash和檢視的關係,我們可以把hash和view做乙個對應關係(對映)

- 設定hash-view的map(對映)關係

- 監聽hash變化

- 當hash值變化的時候,根據map找到對應的元件來渲染檢視

vue為我們提供了乙個第三方的框架來實現上述的功能:vue-router

npm install vue-router / yarn add vue-router

如何用vue cli快速搭建乙個vue專案

如何用vue cli快速搭建乙個vue專案 vue cli是vue的腳手架。腳手架就是工地上為了保證各施工過程順利進行而搭設的工作平台,vue cli用來快速搭建乙個vue專案。我在桌面建立乙個vuetest資料夾,然後用vs code開啟該資料夾 ctrl 加 鍵開啟終端,輸入npm v 檢視no...

初始化乙個指標的方法

方法1.在用到指標的地方.cpp中 cinfo pinfo pinfo cinfo createinfo 中是類cinfo的定義 ifndef info h define info h include using namespace std class cinfo endif 類cinfo的.cpp...

乙個簡單的初始化問題

也許只有實踐才知道自己的c語言基礎有多薄弱。今天在vc知識庫論壇上問了乙個弱弱的問題。我在乙個類裡宣告 enum charm cbuffer sbf 然後在建構函式裡初始化 m cbuffer sbf 編譯時出現了這些錯誤 syntax error 之後我將這個初始化語句改為 memset m cb...