1. 程式人生 > >Vuejs例項-01使用vue-cli腳手架搭建Vue.js專案

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 run dev 

後面分步說明。

2. 安裝

前提條件,Node.js >=4.x版本,建議使用6.x版本。npm版本 > 3.x
全域性安裝vue-cli

$ npm install -g vue-cli 

vue-cli-install

...
vue-cli-install

3. 使用

 $ vue init <template-name> <project-name> 

vue官方提供了多個打包工具版本的模版。我們可以使用vue list命令檢視,當前可以使用的模版。

$ vue list 

vue list

我們在這裡,使用webpack模版。 功能齊全的webpack& vue-loader 提供熱載入、程式碼檢查、單元測試和css分離

$ vue init webpack vue-element-admin

vue init

之後,在E:\project資料夾下面,會有剛初始化的構建的專案vue-element-admin

project file

4. 執行結果

專案基礎結構已經搭建好了,現在來啟動它。
進入專案檔案:

$ cd vue-element-admin 

安裝依賴:

中國行情原因,直接安裝,有時候會失敗。我們一般使用npm的淘寶映象cnpm。
先安裝cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之後,使用:

$ cnpm install 

你直接安裝也可以的:

$ npm install 

執行:

$ npm run dev

npm run dev

啟動之後,自動開啟預設瀏覽器

admin page

之後,就可以進行本地開發,實時預覽開發效果。

5. 打包部署

專案開發完成之後,可以使用npm run build進行打包工作

$ npm run build

打包完成之後,會生成dist資料夾,專案上線時候,只需要將dist資料夾放到伺服器就行了。

6. 專案結構

專案結構

vue-element-admin:             專案名稱 
|   .babelrc                   babel的配置檔案 
|   .editorconfig              編輯器的配置檔案 
|   .gitignore                 git的忽略檔案 
|   .postcssrc.js              編譯css的工具 
|   index.html                 網站主頁 
|   package.json               專案依賴哪些包的檔案 
|   README.md                  說明文件 
|  
+---build                      構建的配置資料夾 
|       build.js               專案構建配置入口
|       check-versions.js
|       dev-client.js
|       dev-server.js
|       utils.js
|       vue-loader.conf.js
|       webpack.base.conf.js
|       webpack.dev.conf.js
|       webpack.prod.conf.js
|       webpack.test.conf.js
|      
+---config                      整體的配置資料夾
|       dev.env.js
|       index.js                配置檔案入口
|       prod.env.js
|       test.env.js
|      
+---src                         原始檔夾
|   |   App.vue                 佈局元件
|   |   main.js                 入口檔案
|   |  
|   +---assets                  靜態資料夾
|   |       logo.png
|   |      
|   +---components              元件資料夾
|   |       Hello.vue           單個元件
|   |      
|   \---router                  路由資料夾
|           index.js            路由主頁
|          
+---static                      靜態資料夾
|       .gitkeep                空檔案(Git本身不允許全空目錄提交至版本庫,一個辦法是在目錄下建立一個檔案,取名為.gitkeep是習慣用法)
|      
\---test                        測試資料夾

7 總結

萬事開頭難,前期專案搭建可能會遇到一些問題,冷靜分析慢慢都能解決的。

8 專案原始碼

相關推薦

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專案

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

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

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

Vue.js基礎學習之 搭建vue.js 專案框架。

還是那就俗話,寫部落格的原因就是為記筆記。其實本人也在word 文件上,也記了,但是怕丟。所以寫成部落格,當自己再需要的時候可以檢視。本人主要是c#,asp.net。為了能一人獨立開發一個完整的專案,所以學習一套前端的架構。有錯誤的地方,歡迎大家指出。不說廢話,趕緊利索的寫實

cli腳手架vue + iview專案構建

1.安裝nodejs 和 npm (這裡不做贅述,不懂的可以自己百度) 2.全域性安裝 vue-cli(如果以前安裝過就調過這步,如果沒安裝請安裝,沒安裝執行第3步會提示你安裝) $ npm install --global vue-cli 3.建立一個基於 w

使用vue-cli腳手架建立vue+webpack專案

Vue-cli是快速構建這個單頁應用的腳手架。 使用npm全域性安裝vue-cli(前提是你已經安裝了nodejs,否則你連npm都用不了),在cmd中輸入一下命令: 1.npm install –

搭建 vue.js 專案執行環境

預警: 本人非前端開發. 3件事兒: install running enviroment new vue proj

使用vue-cli腳手架搭建簡單項目框架

blog npm cnblogs 模板 ext 國內 -- web ted 1.首先已經安裝了node,最好版本6以上。 2.安裝淘寶鏡像 大家都知道國內直接使用 npm 的官方鏡像是非常慢的,這裏推薦使用淘寶 NPM 鏡像。這樣就可以直接使用cnpm了。 npm ins

vue學習筆記(三):vue-cli腳手架搭建

node log ins 版本 返回 ges 技術分享 安裝webpack webp 一:安裝vue-cli腳手架: 1:為了確保你的node版本在4.*以上,輸入 node -v 查看本機node版本,低於4請更新。 2:輸入: npm install -g vue-c

使用vue-cli腳手架搭建項目,保存編譯時出現的代碼檢查錯誤(ESLint)

rip 正則 fin 外部 內置 global 同名 esp 復雜 一、問題 出現這麽寫錯誤是什麽原因呢?相信很多小白都會像我一樣,第一次接觸時有點二丈和尚摸不著頭腦。其實是在你用vue-cli腳手架構建項目時用了ESLint代碼檢查工具,如下圖 那麽什麽是ESL

vue-cli腳手架搭建項目整理筆記

框架 請求 解壓 第一次 spl dep 相對 筆記 bsp 筆記是整理之前開發外賣APP的整個設計框架和搭建基礎以及如何修改配置方面。老實說第一遍寫的時候腦袋裝不下,第一次開發時自己手寫了些筆記,但是當時恨不得把整個全寫下來,可是內容太多了,就寫了些關鍵的地方。寫完後自己

Vue-cli腳手架搭建專案

1、命令列操作(須有node和webpack) a)cnpm install [email protected] -g 全域性安裝(只需要安裝一次即可) b)vue init webpack myapp 初始化專案 c)cd myapp

Vue.js安裝腳手架Vue.js安裝vue-cli

Vue.js安裝腳手架,Vue.js安裝vue-cli   ================================ ©Copyright 蕃薯耀 2018年11月27日 http://fanshuyao.iteye.com/   一、使用npm命令需要先安裝

使用vue-cli腳手架工具搭建vue-webpack專案

Vue和Angular、React都是前端框架 1、單頁面框架、 2、基於模組化元件化的開發模式 Vue簡單 靈活 高效   國內的中小企業裡面用的非常多 搭建vue的開發環境: 1、必須要安裝nodejs 2、搭建vue的開發環境 ,安裝vue的腳手架工具   官

vue-cli腳手架搭建專案靜態資源圖片存放位置

       在剛剛接觸vue專案開始,使用vue-cli搭建vue專案,在目錄中看到static這個資料夾之後就條件反射將靜態檔案放在這個資料夾之下。後來在研究別人寫的一個完整的vue專案的時候發現他的靜態資原始檔是放在src嚇得assets下的,在強烈的好奇感之下,進行了

利用vue-cli腳手架搭建專案時,在我入門時開啟了eslint 一直報黃色的警告 有時候非常的煩惱 所以我要去掉它

我們在專案目錄裡 找到 bulid--->webpack.base.conf.js 然後把下面的 程式碼 註釋掉哦const createLintingRule = () => ({  // test: /\.(js|vue)$/,  // loader: 'es

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

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

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

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

使用vue-cli腳手架搭建專案

目前很多網站都在使用vue技術來開發,那麼問題就來了,怎麼用vue搭建專案呢? 這裡我向大家介紹怎麼使用腳手架搭建專案。 1、首先做好預備工作。 1>安裝node.js 。 因為我們這邊會用到一個命令npm ,它是node自帶的包管理工具,所以需要先安裝node.j

vue專案實戰(一)之vue-cli腳手架搭建專案

首先假如你已經安裝了node和npm,如果沒有的話自己百度安裝一下。 如果感覺npm下載速度慢,可以使用淘寶映象cnpm,連結地址: http://npm.taobao.org/ 安裝cnpm 方式一: npm install -g cnpm --registry