給大家介紹下用 Vue2.0 搭建Vue腳手架(vue-cli),在搭建腳手架之前,先做好環境配置。
詳細如下:
1.先下載node.js(官網地址:https://nodejs.org/en/)下載安裝后,打開命令行工具(win+r,然后輸入cmd),輸入 node -v,查看版本號,出現類似下圖的版本號說明安裝成功:
image.png
2.輸入npm -v 查看 npm 的版本號
image.png
3.有的朋友下載的時候比較慢,也可以通過安裝淘寶鏡像,打開命令行工具,把這個命令(npm install -g cnpm --registry=https://registry.npm.taobao.org)復制到命令行工具,記住要手動的右鍵粘貼,因為ctr + v 的在命令行沒法粘貼。
4.現在有很多的項目模版(項目模版)
simple
webpack
webpack-simple
browserify
browserify-simple 等等
今天主要說下webpack 跟 webpack-simple
基本使用流程
(1) npm install vue-cli -g 安裝vue命令環境 如下圖(下載中):
image.png
image.png
(2)生成項目模版
命令: vue init <項目模版名> 本地自己想要創建的文件名字 如下圖:
image.png
這個時候出現?Project name 就是項目名稱的意思,直接enter,然后還會跳出來另外的提示,一路enter下去,出現下圖,說明項目模版創建完畢,這時候還沒有完。
image.png
注意: 此處自己創建的項目名字不能含有大些字母,不然報錯提示
圖片.png
image.png
注意:這個地方看你在那個文件夾里面,如果你是在剛剛創建的文件夾同一層打開的命令工具,那么直接cd <自己創建的項目名字>是可以進入的,這里簡單說下
CD 目錄名 進入到目錄名文件夾
CD \ 退回到根目錄
CD .. 退回到上一根目錄
CD 或者 CD . 顯示當前路徑
image.png
(5)這個時候 運行 npm run dev
image.png
image.png