1. 程式人生 > >vue-cli快速搭建vue專案並上傳github

vue-cli快速搭建vue專案並上傳github

首先我們先用vue-cli快速搭建vue專案。

假設你的電腦上已經安裝好了nodejs(如何安裝nodejs此處跳過,網上很多教程),那麼接下來就安裝vue-cli。

1、全域性安裝vue-cli,程式碼如下;

npm install vue-cli -g

2、用vue-cli快速建立vue專案(模板),程式碼如下;
vue init webpack projectname

其中會有提示,一路回車,使用預設的就ok。projectname為你專案名稱,自擬。

現在你就可以看到你的目錄下有了   projectname  這個資料夾。

3.然後進入目錄

cd projectname

4、初始化這個資料夾為一個git可管理倉庫
git init
我們能夠發現在當前目錄下多了一個.git的目錄,這個目錄是Git來跟蹤管理版本庫。

5、在github建立遠端倉庫,倉庫名字和本地專案名稱一致

6、將本地倉庫與遠端倉庫關聯

git remote add origin [email protected]:zhang478/vue-mode.git

7、將本地檔案提交到遠端倉庫。

此處我使用了webstorm配置的git提交程式碼,但是遇到一點問題,手殘將遠端倉庫的reademe檔案刪除了,導致push一致失敗,然後網上找了一下解決方案。

push報錯:

解決方案:

通過一下程式碼合併

git pull --rebase origin master

然後再次push,ok,解決。 success!!

8、將程式碼推送到github之後,現在安裝外掛模組

npm  install
9、奔跑吧,專案
npm  run  dev

現在你可以在瀏覽器中看到你的專案頁面了!!

相關推薦

vue-cli快速搭建vue專案github

首先我們先用vue-cli快速搭建vue專案。 假設你的電腦上已經安裝好了nodejs(如何安裝nodejs此處跳過,網上很多教程),那麼接下來就安裝vue-cli。 1、全域性安裝vue-cli,程

vue-cli快速搭建vue專案

1.安裝node(使用6+) 2.安裝cnpm:安裝包時,記得以管理員許可權開啟cmd 3.安裝vue-cli :npm install -g vue-cli 4.建立專案:vue init webpack XX  (請確保安裝了webpack) 5.開發模

基於Vue-cli 快速搭建專案

Vue-cli可以快速幫助我們建立一個專案,這是官方給我們提供的腳手架。下面我說一下vue-cli的使用方法。 一、準備工作   在使用vue-cli時,首先需要安裝nodejs,npm,其次需全域性安裝vue和vue-cli   1、nodejs和npm安裝方法詳見https://www.cnblog

vue-cli(vue腳手架)快速搭建前端專案——Vue系列部落格一

最近自己做了一個vue做前端,nodejs做後的完整專案,在此過程遇到的問題和收穫的心得分享出來,希望能和大家交流探討。 專案搭建步驟 1.首先要確保計算機上安裝了nodejs環境,才能進行以下步驟(nodejs環境安裝); 2.使用淘寶映象:npm config set registry

使用Vue-cli快速搭建專案

vue-cli 是一個官方釋出的 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案。 一、 安裝 node.js 首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/下載安裝包。 如果是windows版本,直接預

通過Vue CLI 快速建立Vue專案部署到tomcat

前言 最近一直在寫前端,用的是JSP,但是很多人都說JSP已經過時了。既然做了幾個月的前端,那就把前端學的好一點,學點新技術,跟上潮流。感覺Vue挺火的,所以這幾天學了一下Vue,開始看的官方文件,然後直接用GitHub上比較火的專案進行學習,本地跑起來,看看

手把手教學之vue-cli快速搭建腳手架

1.自定義特徵 2.babel,router,vuex,css前處理器的選擇 3.使用history模式進行路由選擇 4.選擇css前處理器(這裡我們選擇stylus) 5.建立配置檔案 6.選擇是否儲存這個專案的預設 7.安裝包依賴,出現下圖則表示安裝成功 8.命令

基於Vue-cli 快速搭建項目

信息 創建項目 sel 安裝方法 font users 配置 ali 完成 Vue-cli可以快速幫助我們創建一個項目,這是官方給我們提供的腳手架。下面我說一下vue-cli的使用方法。 一、準備工作   在使用vue-cli時,首先需要安裝nodejs,npm,其次需全局

vue-cli腳手架搭建vue專案

一、下載nodejs並安裝和配置環境變數 1.在nodejs的安裝目錄下新建node_cache和node_global兩個資料夾。 2.設定上面兩個資料夾,以後安裝的-g的全域性包都會在配置的目錄

vue-cli安裝搭建初始專案

vue-cli腳手架 前提:node + npm 安裝好 一、介紹 vue-cli: Vue + ESLint + webpack + iview + ES6 Vue:主要框架ESLint:幫助我們檢查js程式設計時語法錯誤。原因:一個專案在多人開發,能達到一致的語法 webpack:設定代理、外掛

基於vue-cli快速搭建開發框架(axios,global,vuex,vue-router...)

title: 基於vue快速搭建開發框架從去年開始接觸vue開發,也從頭到尾經歷了兩個大專案,從搭建專案一點點的也積累了不少經驗,也給自己挖了不少的坑。同樣的,填的坑也不少。今天就總結一下,如何搭建vue前端開發框架。其中涉及的相關技術有:vue-cli腳手架、vuex作為全域性事件、變數的管理,global

vue-cli腳手架搭建專案怎麼去除eslint驗證

eslint驗證,為我們提升我們的程式碼質量和良好的編碼風格帶來了非常大的幫助,但是由於其語法驗證的嚴格,很多程式設計師在初期使用的時候很不適應,就想怎麼能夠去掉eslint驗證。其實把eslint驗證去除的方法並不複雜,因為我們的腳手架是基於webpack的,那麼一般的配置

【23】使用vue-cli腳手架搭建webpack專案基本結構

上一篇文章介紹如何手動配置webpack專案基本結構,在真實開發環境中我們是不需要那麼麻煩的,我們可以藉助工具【vue-cli】 — 腳手架來幫我們搭建webpack專案基本結構。 第一步:我

Vuejs例項-01使用vue-cli腳手架搭建Vue.js專案

目錄 1. 前言 vue-cli 一個簡單的構建Vue.js專案的命令列介面 整體過程: $ npm install -g vue-cli $ vue init webpack vue-element-admin $ cd vue-element-admin $ npm install $ npm

vue-cli快速生成vue專案

一、全域性安裝webpack npm install webpack -g 二、安裝node 三、全域性安裝vue-cli npm install vue-cli -g 四、生成專案  vue init webpack project_name 五、安裝依賴模組

使用vue-cli腳手架搭建vue專案。(webpack)

注:本文不介紹vue語法。只是個從零搭建vue的demo。1.首先是環境搭建。配置好node環境。全域性安裝vue,vue-cli.這裡就不做介紹了。2.使用vue-cli初始化專案。vueTemplate是專案名稱。vue init webpack vueTemplate後

使用vue-cli3開發vue專案github使用github page展示首頁出現白屏的解決方案

今年企業對Java開發的市場需求,你看懂了嗎? >>>   

vue-cli快速構建vue項目

div 項目文件 項目 運行 百度一下 nod install 快速 文件 1、安裝node 。。。。。。百度一下 2、安裝vue-cli npm install -g vue-cli 3、創建項目 4、進入項目文件,安裝依賴 5、運行 npm run dev

vue-cli+webpack搭建vue開發環境

安裝vue-cli npm install -g vue-cli 下載webpack最新版本,建立檔案vue-cli vue init webpack vue-cli 執行指令後,預設回車,如圖所示 Project name :專案名稱 (不能大寫) Pr

vue-cli 快速構建vue應用,實現webpack打包

一、什麼是vue-clivue-cli是由vue官方釋出的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/之前需要使用vue的單檔案元件的功能,即將不同的模板分離到不同的.vue字尾的