vue專案搭建

2021-10-03 17:19:57 字數 2380 閱讀 8696

在使用vue搭建乙個專案時,有一下兩種方法:

script指令碼引入

cli腳手架的方法(①從github轉殖;②npm安裝)

首先,第一種script指令碼引入的方法,可以快速上手,不需要太多的前期配置,引入即可使用;但是,指令碼引入導致瀏覽器載入頁面速度變慢,影響使用者體驗。個人覺得,一般指令碼引入的方法試用於初學者練習vue或者對頁面載入速度要求不高的**。

一、指令碼引入方法

官網裡是這樣介紹的:

① 對於製作原型或學習,你可以這樣使用最新版本:

""

>

<

/script>

""

>

<

/script>

以上指令碼引入這兩個方法,根據你的需求引入乙個即可;

其次,第二種npm安裝vue腳手架的方法。這種方法,在實際的vue專案開發是必須的,前期需要自行搭建腳手架,相對指令碼引入來說比較麻煩,但是,對於開發者開發過程和使用者對於頁面載入效率的體驗是非常好的。(推薦使用)

注意:vue腳手架安裝,前提必須有:vue、node.js、npm

① github官網轉殖安裝vue腳手架。

// 找乙個空的資料夾,在當前資料夾下開啟cmd,執行以下命令(轉殖):

//(轉殖好以後,就已經安裝好vue腳手架了)

// 移動到轉殖好的資料夾下的vue目錄下:

cd node_modules/vue

// 安裝依賴包

npm i

// 此時,乙個完整的vue腳手架已經搭建完畢。可以正常寫自己的專案了。

// 如果,需要預覽頁面,可以執行: (瀏覽器中輸入 localhost:8080 回車)

npm start

// 如果,要打包專案,可以執行:

npm run build

// 同上,需要在空的目錄下開啟cmd,執行

npm i vue // (沒有vue的,需要安裝下vue,要不後面會提示vue不是內部或外部命令)

// 腳手架安裝

npm i -g @vue/cli

// 安裝完成後,可以測試一下是否安裝成功(如果出現版本號,說明安裝成功!)

vue -

v// 注意:這裡的v是大寫!

// 使用腳手架建立乙個vue專案:

vue init webpack mypro1 // mypro1是專案名稱,可以自行修改

/*

**這裡會有一些腳手架初始化的配置詢問:**

1.project name:專案名,可以直接回車(預設mypro1),也可以自己修改。

2.project description:專案描述,直接回車

3.author:作者是誰,隨便填或直接回車

4.vue build:選擇題,一般選第乙個

4.1 runtime + compiler: recommended for most users//執行加編譯,官方推薦,就選它了

4.2 runtime-only: about 6kb lighter min+gzip, but templates (or any vue-specific html) are only allowed in .vue filesrender functions are required elsewhere//僅執行時,已經有推薦了就選擇第乙個了

6.use eslint to lint your code:是否用eslint來限制你的**錯誤和風格。n 新手就不用了,但實際專案中一般都會使用。

7.set up unit tests:是否安裝單元測試 ,輸入n

8.setup e2e tests with nightwatch?:是否安裝e2e測試,輸入 n

9.should we run `npm install` for you after the project has been created? (recommended) (use arrow keys) yes, use npm 選擇npm。

繼續回車,這樣就好了,靜待安裝即可!

*/// 以上步驟,腳手架安裝完畢

// 接下來,進入到專案目錄下:

cd mypro1

// 同上,預覽專案,執行: (瀏覽器中輸入 localhost:8080 回車)

npm start

// 打包專案,執行

npm run build

vue專案搭建

前提安裝好node不再贅述 可以在自帶的命令列中執行,也可以在webstome中執行 安裝cnpm npm install g cnpm registry 安裝webpack 這一步可以省略,反正你也不會用 cnpm install webpack g 全域性安裝 vuecnpm install g...

Vue專案搭建

vue cli 專案搭建及常用外掛程式安裝,報錯解決 環境搭建 node v 檢測版本 2.安裝webpack npm install webpack g webpack v 檢測是否安裝成功 專案搭建 1.npm install vue cli g vue v 接下來的步驟有兩種方式 1 cd 進...

vue專案搭建

1 安裝 映象,用cnpm裝東西很省事,目前沒被坑過 一下命令在cmd中完成 可以不按裝 npm install g cnpm registry 2 安裝vue腳手架 cnpm install g vue cli測試是否成功安裝 vue v 3.進入安裝的資料夾目錄,構建檔案結構目錄 vue ini...