Vue新手指南之創建第一個vue-cli腳手架程序

Posted on by

1. Vue–第一個vue-cli程序

Vue的開發都是要基於NodeJS，實際開發采用Vue-cli腳手架開發，vue-router路由，vuex做狀態管理；Vue UI，界面我們一般使用ElementUI（餓瞭麼出品），或者ICE（阿裡巴巴出品）來快速搭建前端項目~~

ElementUI

ICE

1.1 什麼是vue-cli

vue-cli官方提供的一個腳手架，用於快速生成一個vue的項目模板；

預先定義好的目錄結構及基礎代碼，就好比咱們在創建Maven項目時可以選擇創建一個骨架項目，這個估計項目就是腳手架，我們的開發更加的快速；

項目的功能

  • 統一的目錄結構
  • 本地調試
  • 熱部署
  • 單元測試
  • 集成打包上線

1.2 需要的環境

  •  Node.js
  • Git

確認nodejs安裝成功：

  • cmd下輸入node -v，查看是否能夠正確打印出版本號即可！
  • cmd下輸入npm -v，查看是否能夠正確打印出版本號即可！

在這裡插入圖片描述

npm，就是一個軟件包管理工具

安裝vue-cli

npm instal1 vue-cli -g
#測試是否安裝成功#查看可以基於哪些模板創建vue應用程序，通常我們選擇webpack
vue list

在這裡插入圖片描述

提示:如果vue list 查詢失敗請把 node_global目標添加到path環境變量
在這裡插入圖片描述

1.3 第一個vue-cli程序

1.3.1 創建一個Vue項目

我們隨便建立一個空的文件夾在電腦上，我這裡在D盤下新建一個目錄

在這裡插入圖片描述

1.3.2 創建一個基於webpack模板的vue應用程序

#1、首先需要進入到對應的目錄 cdE:\IDEACode\Vue\vue
#2、這裡的myvue是頂日名稱，可以根據自己的需求起名
vue init webpack myvue

一路都選擇no即可；

說明：

1.3.3 初始化並運行

cd myvue
npm install
npm run dev

命令執行成功後會出現以下提示

在這裡插入圖片描述

在遊覽器打開剛剛的端口

在這裡插入圖片描述

可以在index.js修改端口號等配置文件

在這裡插入圖片描述

總結

到此這篇關於Vue新手指南之創建第一個vue-cli程序的文章就介紹到這瞭,更多相關第一個vue-cli程序內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：