vue.js開發環境搭建

1、什麼是vue­cli

是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境、依賴等資訊都配置好。

2、全域性安裝vue­cli

前期準備
下載node安裝包,傻瓜式安裝(下一步,下一步……)
https://nodejs.org/en/
http://nodejs.cn/download

1. 檢查npm 版本，建議安裝到最新版本。
   【命令列檢視版本號】
   node ­v
   npm ­v
   【升級npm（可選操作）】npm install ­g npm
   【修改為淘寶映象（可選操作）】
   npm config set registry “https://registry.npm.taobao.org”

2. 安裝
   【全域性安裝 webpack】
   npm install webpack ­g
   【webpack 4.X 開始，需要安裝 webpack­cli 依賴】
   npm install webpack webpack­cli ­g
   【檢視版本號】
   webpack ­V
   【全域性安裝vue­cli】2.0版本
   npm install ­g vue­cli
   【檢視版本號】
   vue ­V
   【輸入vue 輸出以下為安裝成功】
   

注：若出現“Unexpected end of JSON input while parsing near”錯誤，命令列輸入： npm cache clean ­­force

3. 建立專案（命令列方式）
   （1）建立一個檔案儲存的路徑。比如：E:\vue\vue­demo
   【命令列進入該目錄】
   cd E:\vue\vue­demo
   【下載模板】
   vue init webpack vue­demo 【vue­demo專案名字】
   【進入互動頁面，根據自己情況選擇】
   ?Project name vue­demo # 專案名稱，直接回車，按照括號中預設名字
   （注意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can nolonger contain capital letters）。
   ? Project description A Vue.js project # 專案描述,隨便寫
   ? Author # 作者名稱
   ? Vue build standalone # 我選擇的執行加編譯時
   Runtime + Compiler: recommended for most users[推薦]
   ? Install vue­router? Yes # 是否需要 vue­router
   ? Use ESLint to lint your code? 選擇No # 是否使用 ESLint 作為程式碼規範. 對ES程式碼 有限制 link­限制 如果選擇了YES則會有下選項
   ? Pick an ESLint preset Standard # 一樣的ESlint 相關
   ? Set up unit tests Yes # 是否安裝單元測試 選擇No
   ? Pick a test runner 按需選擇 # 測試模組
   ? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試選擇No
   ? Should we run npm install for you after the project has been
   created? (recommended) npm # 包管理器，選NPM
   安裝成功後，進入專案目錄
   【命令列進入該目錄】
   cd E:\vue\vue­demo
   【初始化專案】
   npm install //node_modules
   【啟動專案，根據package.json中的資料來啟動】
   npm run serve / npm run dev
   【關閉專案】
   Ctrl + C
   【瀏覽器訪問：】
   http://localhost:8080/
   【專案打包上線】
   npm run build
   將打包後生成的dist 目錄中的檔案拷貝到伺服器的相應地址即可（比如tomcat的webapps目錄下）。