vue-cli腳手架搭建專案

阿新 • • 發佈：2020-10-16

1.npm i -g @vue/cli

2. vue --version

3. vue create 專案名稱或者vue ui(介面性建立專案)

第一次配置

注意：如果想刪除預設的配置：找到C:\Users\使用者名稱\.vuerc檔案，進行修改即可。第一次配置的時候就按照上面去操作以後可以用預設的配置

1.npm i -g @vue/cli 2. vue --version 3. vue create 專案名稱或者vue ui(介面性建立專案) 第一次配置

命令航工具 vue-cli 搭建vue專案的腳手架(預先定好號的目錄和基礎程式碼) 　　1.統一的目錄結構

1. 安裝版本: 最新的 vue-cli @4.4.6, 之前還有vue-cli@3.0, vue-cli@2.0, vue-cli@1.0不同的版本.

目錄Vue CLIVue CLI 的使用腳手架建立專案前端路由 Vue CLI CLI是什麼意思？ CLI是Command-Line Interface，翻譯為命令列介面，俗稱腳手架

命令列工具 (CLI) https://cn.vuejs.org/v2/guide/installation.html#命令列工具-CLI Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設定

vue-cli這個構建工具大大降低了webpack的使用難度，支援熱更新，有webpack-dev-server的支援，相當於啟動了一個請求伺服器，給你搭建了一個測試環境，只關注開發就OK。

什麼是腳手架？可以快速生成新專案的目錄模板(Node.js)，將複雜的前端專案分成多個系統化的模組，便於管理和編輯，簡化開發的軟體。

vue-cli是用node編寫的命令列工具，我們需要進行全域性安裝。開啟命令列終端，輸入如下命令：

1. 安裝node.js 對應下載安裝教程參考最下面 2.包管理器 2.1 npm 國外 2.3 cnpm 淘寶映象（國內）安裝教程參考最下面

問題截圖：解決方案： 1、開啟File --> Setting 視窗 2、搜尋 Webpack 3、選擇如下路徑

一、環境搭建　　1、安裝node、npm、webpack，不多說　　2、安裝vue-cli腳手架構建工具，開啟命令列工具輸入：npm install vue-cli -g，安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如果出現相應的版本號，

1. 準備 1.1 安裝node.js 安裝過程很簡單，在官網下載安裝包，點選安裝，一直下一步直到安裝完成即可，新版本的node.js會自動新增環境變數，不需要再手動新增環境變數，如有疑問，可自行前往環境變數檢視。

Vue環境搭建步驟概括：（1）下載安裝node.js （2）設定node的全域性和快取路徑

建立vue3專案步驟如下：第1步：使用 npm 指令安裝vue-cli 。開啟命令工具輸入 npm install -g @vue/cli安裝vue-cli的最新版本，如下圖：

前言在使用 vue create my-app 建立專案的時候，Vue 會自動幫我們做好一些預配置，你可以不使用它，但是一旦需要的時候，突然發現，咦~原來它已經幫我做好準備工作了，只需要按自己的需求配置一下就可以了，就會覺得

vue-cli4腳手架搭建一 vue create vue3 cd vue3 yarn serve http://localhost:8080/#/ main.js檔案 import Vue from \'vue\'

　　1. 先下載node.js，下載地址：https://nodejs.org/en/download/ 　　　　　　　　找個目錄儲存，解壓下載的檔案，然後配置環境變數，將下面的路徑配置到環境變數中。

元件傳值 <script> import LunBo from \"./LunBo\"; export default { name: \'Home\', components: {LunBo},

Vue 安裝及配置 #1 安裝node，官網下載 node -v v10.16.3 #2 安裝模組 npm install 模組名 #npm比較慢，用淘寶的cnpm來替換npm

使用到vue專案的檔案包括一個.html，兩個.js，兩個.vue檔案，關係如上圖所示 1、index.html為vue專案預設首頁，裡面預設引用了app.vue根元件