詳解如何使用vue-cli腳手架搭建Vue.js項目
更新時間：2017年05月19日 08:25:07 作者：weiqinl
這篇文章主要介紹了詳解如何使用vue-cli腳手架搭建Vue.js項目 ,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1. 前言
vue-cli 一個簡單的構(gòu)建Vue.js項目的命令行界面
整體過程：
$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev
后面分步說明。
2. 安裝
前提條件，Node.js >=4.x版本，建議使用6.x版本。npm版本 > 3.x
全局安裝vue-cli
$ npm install -g vue-cli
3. 使用
$ vue init <template-name> <project-name>
vue官方提供了多個打包工具版本的模版。我們可以使用vue list命令查看，當前可以使用的模版。
$ vue list
我們在這里，使用webpack模版。 功能齊全的webpack & vue-loader 提供熱加載、代碼檢查、單元測試和css分離
$ vue init webpack vue-element-admin
之后，在E：\project文件夾下面，會有剛初始化的構(gòu)建的項目vue-element-admin
4. 運行結(jié)果
項目基礎結(jié)構(gòu)已經(jīng)搭建好了，現(xiàn)在來啟動它。
進入項目文件:
$ cd vue-element-admin
安裝依賴：
中國行情原因，直接安裝，有時候會失敗。我們一般使用npm的淘寶鏡像cnpm。
先安裝cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后，使用:
$ cnpm install
你直接安裝也可以的：
$ npm install
運行：
$ npm run dev
啟動之后，自動打開默認瀏覽器
之后，就可以進行本地開發(fā)，實時預覽開發(fā)效果。
5. 打包部署
項目開發(fā)完成之后，可以使用npm run build進行打包工作
$ npm run build
打包完成之后，會生成dist文件夾，項目上線時候，只需要將dist文件夾放到服務器就行了。
6. 項目結(jié)構(gòu)
相關(guān)文章
本文主要介紹了vue實現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要給大家介紹了關(guān)于vue+echarts實現(xiàn)折線圖的方法與注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-12-12
這篇文章主要介紹了vue.js選中動態(tài)綁定的radio的指定項,需要的朋友可以參考下2017-06-06
本文主要介紹了element?tab標簽管理路由頁面的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue不同方法跳轉(zhuǎn)頁面，本文給大家分享多種方法，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue中利用pinyin-pro純前端實現(xiàn)拼音的模糊搜索功能
這篇文章主要介紹了vue中利用pinyin-pro純前端實現(xiàn)拼音的模糊搜索,實現(xiàn)思路很簡單，通過安裝配置插件編寫工具類，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
快速解決Error: error:0308010C:digital envelope ro
因為 node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對允許算法和密鑰大小增加了嚴格的限制,下面通過本文給大家分享快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案,感興趣的朋友一起看看吧2024-02-02
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要介紹了Vue中jsx不完全應用指南小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11