windows 下用vue-cli腳手架工具建立vue專案及遇到的相關問題
vue-cli 是一個官方釋出 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案,GitHub地址是:https://github.com/vuejs/vue-cli
一、 安裝 node.js
首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/下載安裝包。
安裝完成後,可以命令列工具中輸入 node -v 和 npm -v,如果能顯示出版本號,就說明安裝成功。
二、安裝 vue-cli
安裝好了 node,我們可以直接全域性安裝 vue-cli:
npm install -g vue-cli
但是這種安裝方式比較慢,推薦使用國內映象來安裝
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安裝失敗,可以使用 npm cache clean 清理快取,然後再重新安裝。後面的安裝過程中,如有安裝失敗的情況,也需要先清理快取
同樣可以使用 cnpm -v 檢視是否安裝成功
然後使用 cnpm 安裝 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 專案模板中,都帶有 webpack 外掛,所以這裡可以不安裝 webpack
安裝完成後,可以使用 vue -V
如果提示“無法識別 'vue' ” ,有可能是 npm 版本過低,可以使用 npm install -g npm 來更新版本
三、生成專案
首先需要在命令列中進入到專案目錄,然後輸入:
vue init webpack Vue-Project
Vue-Project 是自定義的專案名稱,命令執行之後,會在當前目錄生成一個以該名稱命名的專案資料夾
配置完成後,可以看到目錄下多出了一個專案資料夾,裡面就是 vue-cli 建立的一個基於 webpack 的 vue.js 專案
然後進入專案目錄(cd Vue-Project),使用 cnpm 安裝依賴
cnpm install
然後啟動專案
npm run dev
如果瀏覽器開啟之後,沒有加載出頁面,有可能是本地的 8080 埠被佔用,需要修改一下配置檔案 config>index.js
建議將埠號改為不常用的埠。另外我還將 build 的路徑字首修改為 ' ./ '(原本為 ' / '),是因為打包之後,外部引入 js 和 css 檔案時,如果路徑以 ' / ' 開頭,在本地是無法找到對應檔案的(伺服器上沒問題)。所以如果需要在本地開啟打包後的檔案,就得修改檔案路徑。
四、打包上線
自己的專案檔案都需要放到 src 資料夾下
專案開發完成之後,可以輸入 npm run build 來進行打包工作
npm run build
打包完成後,會生成 dist 資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視
專案上線時,只需要將 dist 資料夾放到伺服器就行了。
相關推薦
windows 下用vue-cli腳手架工具建立vue專案及遇到的相關問題
vue-cli 是一個官方釋出 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安裝 node.js 首先需要安裝node環境,可以直接到中文官網
使用vue-cli腳手架工具建立vue專案
vue-cli 腳手架安裝: 1) 確保node環境:安裝vue-cli需要在node環境下安裝,所以首先確保自己安裝了node,檢查自己電腦是否安裝了node ,可以在命令列工具內執行: node -v,如下圖,如果出現相應的版本號資訊,說明安裝了node 如果出
使用vue-cli腳手架工具搭建vue-webpack項目(轉)
後臺 .org 開發 tab targe rip 自動 模塊化 num 對於Vue.js來說,如果你想要快速開始,那麽只需要在你的html中引入一個<script>標簽,加上CDN的地址即可。但是,這並不算是一個完整的vue實際應用。在實際應用中,我們必須要一
使用vue-cli腳手架工具搭建vue-webpack專案
Vue和Angular、React都是前端框架 1、單頁面框架、 2、基於模組化元件化的開發模式 Vue簡單 靈活 高效 國內的中小企業裡面用的非常多 搭建vue的開發環境: 1、必須要安裝nodejs 2、搭建vue的開發環境 ,安裝vue的腳手架工具 官
【Vue.js學習筆記】9:使用npm搭建Vue-CLI腳手架並建立Vue專案
在第一篇的時候確實可以建立,這次跟著視訊搭建一次,比較一下和上次的區別,更正一下上次的錯誤操作,加深理解。 重新搭建Vue-CLI腳手架 在Node.js的安裝目錄下,刪除node_cache/和node_global下的所有內容,即讓Node處於剛剛安裝完成的狀態,連cnpm也
Vue爬坑之路 一:簡單介紹vue及使用vue-cli腳手架工具快速搭建專案
關於Vue.js Vue.js是最近特別火的一個前端MVVM框架,類似於Angular,但更容易上手,而且因為作者是中國人的原因,所以Vue.js的中文文件比較齊全,很多的問題都能在官網文件中得到解決! 使用cnpm安裝Vue.js 首先得下載一下np
Vue-cli 腳手架工具 及 建立專案
1.安裝vue-cli腳手架 $ npm install -g vue-cli # 全域性安裝vue腳手架 # 若npm報錯,可使用cnpm $ cnpm install -g vue-cli # 安裝完成,檢視版本號 $ vue --version 2
vue- Vue-Cli腳手架工具安裝 -建立專案-頁面開發流程-元件生命週期- -03
目錄 本部落格環境 Vue-Cli 專案環境搭建 與 python 基礎環境對比 環境搭建 建立啟動 vue 專案 命令建立專案(步驟小多)
Vue學習(七)——使用Vue-cli腳手架工具構建專案
(1)首先安裝環境:https://blog.csdn.net/dreamzuora/article/details/78911664 這篇文章寫得很贊 (2)在指定的資料夾內搭建,輸入指令vue init webpack todolist,然後根據提示進行選擇,然後回車就ok了 (3)命
如何使用vue-cli 腳手架工具構建
安裝 nodejs 先下載nodejs http://nodejs.org/en/ 安裝完成後,開啟cmd,鍵入 node -v 檢視版本號,如果有,安裝就成功了 安裝淘寶映象 cnpm npm install -g --r
VUE-CLI腳手架工具搭建步驟
腳手架工具安裝 網址:https://cli.vuejs.org cli工具2.0版: 安裝路由:npm install vue-router --save 安裝vuex:npm install vuex --save 安裝axios:npm install
2018.11.8 晚上 vue-cli腳手架工具的使用
最經常的使用的是利用mui做底部的導航欄 利用mint-ui可以製作輪播圖,頭部標籤等 這裡要注意的是:mint-ui一定要記得匯入樣式 在寫輪播圖的時候高度一定要記得寫出來 預設是沒有高度的 mui:要把相應的lib包複製到相應的路徑下 //匯入mint
vue-cli 3.0 建立的專案,dev下能執行,打包後報錯,頁面空白
dev下執行時正常的,但在打包後就不正常了,如下圖報各種檔案找不到,原因是在html引入的img,js或css的路徑不對,如下:<link as=style href=/css/app.f9f2eaa0.css rel=preload> <link as=s
搭建Vue腳手架(vue-cli)並建立一個專案
1、 安裝nodejs環境 首先確保安裝了node node -v npm -v 如果能看到node和npm的版本號了,
使用vue-cli構建工具構建vue項目時候組件的使用
turn app 首頁 add foo count key c11 渲染 <template> <div class="contains"> <!-- <div class="main">
基於vue cli 3.0建立前端專案並安裝cube-ui
前提條件: 安裝node.js。 國內的開發者最好先配置淘寶映象。 之後用cnpm來代替npm命令。 專案建立過程: 開啟cmd,輸入命令進入目標工作空間,以本機專案為例: cd /d d: cd D:\workplace 輸入全域性安裝vuecli的命令:c
使用 vue-cli 3 快速建立 Vue 專案及專案配置 Vue.config.js
1.使用 npm install -g @vue/cli # or yarn global add @vue/cli 檢視版本(是否安裝成功):vue -V(大寫的V) 11576163-5ebc6d418467d0c4.png 2.命令變化 Comm
Vue-cli腳手架構建多頁面專案
一、建立專案 vue init webpack ma 二、修改build資料夾下的utils.js 1、 引入glob外掛 程式碼:var glob = require('glob') 2、 在utils.js文件的底部加入這段
vue-cli 3.x.x搭建專案及配置
vue-cli 官網:https://cli.vuejs.org/zh/guide/ 一、安裝cli 若之前安裝過2.x.x,需先解除安裝 npm uninstall vue-cli -g # or yarn global remove vue-cli Vue CLI 3.0 + 安裝
在windows下用腳手架搭建vue環境
原因 重新安裝 測試環境 安裝 如圖所示 安裝包 依次 等待 環境 做了幾個月vue項目,最近兩個項目使用腳手架搭建的,確實用腳手架搭建方便了許多,想想以前自己手配的時候,確實是。。。 1.在這之前我是默認你已經使用過vue的,也默認你已經安裝了node.js 2.接著安裝