1. 程式人生 > >基於Vue-cli 快速搭建項目

基於Vue-cli 快速搭建項目

信息 創建項目 sel 安裝方法 font users 配置 ali 完成

Vue-cli可以快速幫助我們創建一個項目,這是官方給我們提供的腳手架。下面我說一下vue-cli的使用方法。

一、準備工作

  在使用vue-cli時,首先需要安裝nodejsnpm,其次需全局安裝vuevue-cli

  1、nodejsnpm安裝方法詳見https://www.cnblogs.com/le220/p/8670349.html

  2、npm install -g vue

  3、npm install -g vue-cli

二、vue-cli快速搭建項目

  安裝完成後,同時在C:\Users\Andminster\AppData\Roaming\npm目錄下為會生成幾個文件

三、配置環境變量

  Vue不是內部或外部命令問題解決

  表示系統沒有找到vue.cmd的地址,需要將vue.cmd的地址添加到系統環境變量的path中。

  可以全局搜索,vue.cmd

技術分享圖片

右鍵選擇“打開文件所在目錄”,將該目錄添加至系統環境變量path中:

技術分享圖片

電腦——屬性——高級系統設置

技術分享圖片

四、安裝完成後,創建自己的工作空間,在cmd切換至剛剛創建好的工作空間,如果已經有工作空間,直接切換到工作空間即可。

  使用命令創建項目

  vue init webpack test

  test是項目名稱,這個名字自己隨便取。

  命令輸入後,會進入安裝階段,需要用戶輸入一些信息

  1Project name (vuetest)

項目名稱,可以自己指定,也可直接回車,按照括號中默認名字(註意這裏的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters)。

  2Project description (A Vue.js project) 項目描述,也可直接點擊回車,使用默認名字

接下來會讓用戶選擇

  3接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue項目時的代碼風格,因為我選擇了使用ESLint

  4Standard (https://github.com/feross/standard)

標準

  5AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法,這個github地址說的是JavaScript最合理的方法

  6none (configure it yourself) 這個不用說,自己定義風格

  具體選擇哪個因人而異吧 ,我選擇標準風格

  7Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試,我選擇安裝

  8Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ,我選擇安裝

  9完成

五、運行項目

在項目文件夾下執行npm install(安裝依賴包),npm run dev(運行項目)。

在運行項目中如果遇到端口被占用,找到bulid文件夾下的webpack-dev-server.js修改port即可。

基於Vue-cli 快速搭建項目