vue.js中如何用vue-cli搭建項目

不吃素的唐三藏 發布于 2019/01/26 17:40
查看︰1180|回復︰5

今天我們來介紹一下,如何用vue-cli搭建項目模板

第一、 安裝 node.js

首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/下載安裝包。

安裝完成後,可以令行工具中輸入 node -v 和 npm -v,如果能顯示出版本號,就說明安裝成功。

9e1b688568e6cc716745cef438354d83002.png

第二、安裝 vue-cli

安裝好了 node,我們可以直接全局安裝 vue-cli︰

npm install -g vue-cli

但是這種安裝方式比較慢,推薦使用國內鏡像來安裝,所以我們先設置 cnpm︰?

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

如果安裝失敗,可以使用 npm cache clean 清理緩存,然後再重新安裝。後面的安裝過程中,如有安裝失敗的情況,也需要先清理緩存?

然後使用 cnpm 安裝 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 項目模板中,都帶有 webpack 插件,所以這里可以不安裝 webpack?

安裝完成後,可以使用 vue -V (注意 V 大寫)查看是否安裝成功。

53cfe19175eec3e664c3d509b30f6b7b002.png

第三、生成項目

首先需要在命令行中進入到項目目錄,然後輸入︰

vue init webpack Vue-Project

其中 webpack 是模板名稱?

7d21fcfe01aabd4e5a53e6480443e9e1002.png

Vue-Project 是自定義的項目名稱,命令執行之後,會在當前目錄生成一個以該名稱命名的項目文件夾

9448d69bc2c08fe097e83611978be5b5002.png

配置完成後,可以看到目錄下多出了一個項目文件夾,里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 項目

?

第四.然後進入項目目錄(cd Vue-Project),使用 cnpm 安裝依賴

cnpm install

?

第五.然後啟動項目

npm run dev

項目運行成功後,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。運行成功後,會看到如下所

14086ed7423063042c24e94b6f0569db002.png

全部點贊
總計︰ --

共有5條評論

  • 瞅瞅你的臉瞎了我的眼 瞅瞅你的臉瞎了我的眼

    B_10.gifB_10.gif

    沙發 2019/01/26 17:50
  • 風雲突變 風雲突變

    B_10.gif

    板凳 2019/01/26 18:03
  • 窮不窮你別慫 窮不窮你別慫

    B_10.gifB_10.gif

    地板 2019/01/26 18:55
  • 永遠的拼笑 永遠的拼笑

    1a4c4969937ffa1e661a2c1285b7a393003.gif

    第4樓 2019/01/26 19:03
  • 永遠的拼笑 永遠的拼笑

    B_24.gif

    第5樓 2019/01/26 19:04
招版主啦

版主

  • 楊_宇 楊_宇
  • WEB前講師-甦少強 WEB前講師-甦少強
  • web講師--何廣森 web講師--何廣森
  • web前端講師-閆華偉 web前端講師-閆華偉
  • zacharyjoke zacharyjoke
  • Web講師-李家靖 Web講師-李家靖

注冊有禮

完善以下信息,為你推薦奧門娛樂網址

  • 學生
  • 白領
  • 高管
  • 自由職業
  • 其他
  • 工作需要
  • 自我提升
  • 興趣愛好
  • 創業/轉型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中專
  • 專科
  • 本科
  • 碩士
  • 其他
  • 影視槍戰大片特效解析
  • PS視覺驚悚課堂
  • 45天7千平方大廈變形記
  • 原畫學習痛點技法全解析
  • 影視動畫奇幻課堂
  • AI高端商業設計全攻略
  • UG職場生存必備指南
  • 日賺千元之新媒體行業揭秘
出現異常