搭建Vue腳手架(vue-cli)並建立一個專案
1、 安裝nodejs環境
首先確保安裝了node
node -v
npm -v
如果能看到node和npm的版本號了,說明已經安裝成功
注:node版本最好高一點,保險的話直接安裝最新版本的,因為vue執行需要基於npm一定的版本(最好是3.x.x以上),版本低了有可能會出錯,而npm是隨node的安裝自動安裝的,直接安裝最新的node,npm的版本號也會變高的,不用再做更多的操作,當然,也可以手動升級npm版本號(自己百度)
2、安裝vue-cli
有npm和cnpm兩種方式,網上都說cnpm好些,所以我也用的cnpm安裝,
首先利用淘寶映象安裝cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
安裝完成,輸入
cnpm -v
可以檢視當前cnpm版本,這個和npm的版本還是不一樣的
然後全域性安裝 vue-cli
cnpm install -g vue-cli
這個命令只需要執行一次就可以了。安裝上之後,以後就不用安裝了。
檢視vue版本號
vue -V //注:V是大寫字母V
如果提示“無法識別 ‘vue’ ” ,有可能是 npm 版本過低,需要手動更新npm的版本號,這也是上面說的為什麼要保證npm版本號高的原因,npm的版本可以手動升級更新,沒記錯的話應該是
npm install -g npm
3、使用vue-cli來建立一個基於 webpack 模板的新專案
建立
cmd利用cd指令進入到儲存專案的資料夾下,然後輸入命令
vue init webpack
如圖示記處輸入專案名稱(隨便命名,但不要是中文),其它的看自己需要自行考慮yes還是no,每項的介紹自行百度
建立完成後資料夾內會有如下些檔案
安裝專案所需要的依賴
進入新建的專案資料夾下,就是上頭有一些檔案的裡面,輸入命令
cnpm install
因為自動構建過程中已存在package.json檔案,所以這裡直接安裝依賴就行。
執行專案
cnpm run dev
出現如圖畫面,在瀏覽器中輸入網址http://localhost:8080 會出現如下圖
注意:如果瀏覽器開啟之後,沒有加載出頁面,有可能是本地的 8080 埠被佔用了(預設服務啟動的是本地的8080埠),可以通過修改一下配置檔案 config>index.js裡的埠號
網上有的說執行cnpm run dev後,瀏覽器會自動預設開啟一個“歡迎頁面”,但是我的沒有,原因應該如下
目錄中config下的index.js檔案中,將autoOpenBrowser的值是false,改為true就能自動打開了
4、後續其它步驟—打包上線
自己的專案檔案都需要放到 src 資料夾下
專案開發完成之後,可以輸入 npm run build 來進行打包工作
npm run build
打包完成後,會生成 dist 資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視
專案上線時,只需要將 dist 資料夾放到伺服器就行了。
附:部分檔案功能介紹(網上找的圖片)
相關推薦
搭建Vue腳手架(vue-cli)並建立一個專案
1、 安裝nodejs環境 首先確保安裝了node node -v npm -v 如果能看到node和npm的版本號了,
使用vue腳手架(vue-cli)快速搭建項目
直接 生成 不能 搭建 original 方式 但是 setup 很慢 一、從最簡單的環境搭建開始: 安裝node.js,從node.js官網下載並安裝node,安裝過程很簡單,一路“下一步”就可以了(傻瓜式安裝)。安裝完成之後,打開命令行工具(win+r,然後輸入cm
vue搭建vue腳手架(vue-cli)
介紹 Vue.js是一套構建使用者介面的漸進式框架。 Vue 只關注檢視層,採用自底向上增量開發的設計。 Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。 安裝node.js 從node官網下載並安裝node,安裝步驟很簡單,只要一路“next”就可以了。
Vue2.0 搭建Vue腳手架(vue-cli)
安裝node.js 從node官網下載並安裝node,安裝步驟很簡單,只要一路“next”就可以了。 安裝完成後,開啟命令列工具輸入命令node -v,如下圖,如果出現對應版本號,就說明安裝成功了。 我們所需要的npm包管理器,是整合在node中的,所以,直接輸入np
vue學習之路(1)——搭建vue腳手架(vue-cli)
準備的環境和工具 1. 首先安裝node.js,官網:https://nodejs.org/en/ 2. win+r 輸入cmd 開啟 命令列 輸入node -v 出現相應的版本號,則說明安裝成功。此時已經自帶npm(包管理工具) 3. 安
Vue2.0史上最全入坑教程—— 搭建Vue腳手架(vue-cli)
這裡要手動複製就是用滑鼠右鍵那個,具體為啥不多解釋),安裝這裡是因為我們用的npm的伺服器是外國,有的時候我們安裝“依賴”的時候很很慢很慢超級慢,所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之後輸入 cnpm -v,如下圖,如果出現相應的版本號,則說明安裝成功。安裝webpack安裝webpack
搭建Vue腳手架(vue-cli)
1、安裝node.js 從node.js官網:https://nodejs.org/en/下載並安裝node,安裝過程很簡單,一路“next”就可以了,預設是安裝到C盤,也可以更改安裝位置; PS:如果Node.js預設安裝路徑改到了D盤,則需要配置環境變數
Vue腳手架(vue-cli)安裝總結
spa 自動構建 oba 本地 moc ref mage 管理 信息 單頁Web應用(single page web application,SPA),就是只有一張Web頁面的應用,是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。 提供一個官
Mac OS X下安裝Vue腳手架(vue-cli)
前言 Vue作為前端三大框架(Angular,React,Vue)之一,號稱是最簡單,最容易上手的框架,同時也是行內的大趨勢,還可以用來開發最火的小程式。具有開發快,雙向資料流等特點,有些人認為Vue是Angular和React的結合,既有Angular的模板語法也有React的元件化體系,以至於促使其發展
搭建Vue腳手架(自用筆記)
1.安裝腳手架工具——vue-cli 開啟cmd 安裝 CMD輸入: npm i [email protected] -g vue-cli最新是3,vue-cli安裝2點幾 2.全域性安裝之後就可以使用命令 vue -V可以檢視安裝的版本 3.
Spring Boot (基礎篇):建立一個簡單的SpringBoot專案
Spring Boot建立 首先IDEA新建一個專案,File-New-Project-Spring Initializr,然後Next,如下圖: 填寫專案資訊: 填寫專案使用到的技術,上面的SpringBoot版本建議選擇最新的穩定版,下面勾選上Web就可
手把手做一個JSP入門程式(二):建立一個專案(JSP)
建立一個專案 我們使用Eclipse和Web伺服器的Tomcat進行開發。Eclipse我們需要用“Eclipse IDE for Java EE Developers”(Eclipse為java EE 開發者準備的一個IDE工具),可以點選這裡到官網下載最新
Vue2.0搭建vue腳手架(入坑記錄)
安裝node.js 從node官網下載並安裝node,安裝步驟很簡單,只要一路“next”就可以了。 安裝完成後,開啟命令列工具輸入命令node -v,如下圖,如果出現對應版本號,就說明安裝成功了。 我們所需要的npm包管理器,是整合在node中的,所以,直接
10分鐘搭建Vue環境及安裝腳手架(Vue入門篇)
Vue理念(題外話) 1、Node安裝 2、基於node.js,安裝淘寶映象 國內直接使用 npm 的官方映象是非常慢的,這裡推薦使用淘寶 NPM 映象。 新建一個資料夾,開啟資料夾,在資料夾中按住鍵盤的 shift鍵 + 滑鼠
docker簡易環境搭建實戰篇:以人人網開源專案(renren-fast-vue)搭建分散式部署(前端篇)
docker簡易環境搭建實戰篇:以人人網開源專案(renren-fast-vue)搭建分散式部署(前端篇) 寫在前面:注:閱讀本文前,請先閱讀docker標籤的docker簡易系列的文章。 前端最終實現的架構圖: 第一步 修改前端專案配置 修改專案目錄中 static/co
從零搭建vue工程(vue-router,webpack)
vue 官方提供了快捷構建專案的腳手架工具(vue-cli),只需幾個命令就能輕鬆初始化一個 vue 的 webpack 專案。雖然能夠快速開發,但是如果想自己改些配置會有些困難,擔心一點改動專案就跑不起來了,也不知道每個引數的作用是啥,正所謂“自己動手豐衣
Vue.js(2.x)之計算屬性
眼睛 猜想 官網文檔 data ctype 小結 isp def 直接 昨天看完大神的文章後,深感慚愧,硬著頭皮繼續看官網文檔,然而這真的沒是沒辦法,介紹的實在有些敷衍: 1)、計算屬性:也不說下computed是計算屬性關鍵詞,vm實例是可以像代理data一樣代理comp
vue-router(2.0)之什麼是路由以及使用步驟(筆記)
前端路由: 在web開發中,路由是指根據url分配到對應的處理程式 vue-router: 通過管理url實現url和元件的對應和通過url進行元件之間的切換 可以做單頁面應用(SPA):載入單個HTML頁面,並在使用者與應用程式互動時動態更新該頁面 vue-router的使
webpack4+react+antd從零搭建React腳手架(二)
接著上文,對webpack 的配置的優化和對css,圖片的編譯。以及引入antd 專案程式碼地址react-project 優化webpack 生成的檔名新增Hash值 output: { filename: "js/[name].[chunkhas
【vue 入坑指南 二 】vue路由(vue-router)
vue 筆記二 v-router構建SPA html路由: <router-link></router-link> //相當於a標籤的作用 跳轉標籤 js路由: this.$router.push({path:'