node vue 合併專案 Vue 專案搭建與部署

2021-10-13 23:32:06 字數 1579 閱讀 2242

在開始搭建 vue 專案前，需要確保電腦已經安裝了 node 和 npm 環境。配置好基礎環境後，執行以下命令：

npm install -g vue-cli
新建乙個目錄，例如我在桌面新建乙個 vuedemo 的空資料夾。

c:\users\administrator\desktop\vuedemo
在 cmd 中將工作目錄切換到 vuedemo 檔案中，並執行以下命令：

vue init webpack myproject
webpack 引數是指 myproject 這個專案將會在開發和完成階段幫你自動打包**，比如將 js 檔案統一合成乙個檔案，將 css 檔案統一合併壓縮等。

在初始化專案時，會提示我們輸入相應資訊，我們可以忽略，也可以在構建好專案後在 package.json 中填寫相應資訊。

構建好專案後，在 vuedemo 資料夾下會有乙個 myproject 的資料夾，myproject 資料夾內容如下：

這就是乙個最初始的 vue 專案，我們執行如下命令後，便可在瀏覽器中瀏覽相應網頁。

cd myprojectnpm install # 安裝專案所需要的依賴npm run dev # 執行專案
在瀏覽器中輸入 http://localhost:8080/，便會出現如下的網頁。

專案原始碼

src/main.js 中的初始**如下

import vue from 'vue'
在 vue 中引入檔案可以直接用 import，檔案字尾名可以是 .vue，這是 vue 自己的檔案型別，之前說的 webpack 會將 js 和 css 檔案打包，同樣的道理，在 webpack 中配置 vue 外掛程式後(專案預設配置)，webpack 就可以將 .vue 型別的檔案整合打包，這和 node.js 中 require 差不多的道理。

import router from './router'
這句**引入一段路由配置。

單頁面元件

node端之所以能識別 .vue 檔案，是因為前面說的 webpack 在編譯時將 .vue 檔案中的 html，js，css 都抽出來合成新的單獨的檔案。

檔案內分為三大部分，分別是 、

VUE3 0專案配置

1 專案結構 dist 生產打包輸出目錄 node modules 模組依賴包 public 靜態html和 圖示 src assets 靜態資源，圖示字型 樣式表 components 公共元件 plugins 外掛程式 utils 公共js方法 views 檢視元件 login 登入註冊 ord...

vue專案筆記（31） 專案打包上線

1 在專案終端中執行以下命令 npm run build2 此後，專案會增加dist資料夾，該目錄 就是最終要上線的 3 複製dist資料夾，交於後台開發人員，將 放到後端的伺服器上。4 放置在後端的根目錄下，也可以放置在指定的目錄下。如果要放置在指定的目錄下，我們需要在前端的config inde...

搭建vue框架 二 專案配置

使用webstorm時，別名 符號無法識別，ctrl 滑鼠左鍵無法跳轉 解決方法 使用webstorm時，ctrl 滑鼠左鍵無法從標籤跳轉到eelment內部 解決方法 新增element庫 npm i element ui smain.js中使用 import elementui from ele...