一、安裝node

　　到node官網:https://blog.csdn.net/wulala_hei/article/details/85000530 下載系統對應版本安裝即可。

　　npm是node的一個包管理工具，在node安裝完成之後就可以使用npm.

二、安裝vue-cli

　　什麽是vue-cli???

　　vue-cli是前端開發的一種腳手架工具。那麽什麽又是腳手架工具呢？類比於建築學上，腳手架指施工現場為工人操作並解決垂直和水平運輸而大蛇的各種支架，有了這些支架的支持，施工作業才可以展開。換句話說，腳手架工具為施工搭建好了環境。在前端開發中，腳手架工具的作用也是類似的，為我們配置環境和工具，是我們更加專註於業務。

npm install webpack -g

　　(2)從webpack 4.X 開始，再安裝vue-cli之前需要安裝 webpack-cli 依賴

npm install webpack webpack-cli -g

　　（3）安裝vue-cli

npm install -g vue-cli

　　　(4)安裝完成後，檢驗是否安裝成功，輸入 vue-V (註意：這裏是大寫的 “V”)，如果出現版本號，則說明安裝成功。

vue -V

三、用 vue-cli

　　1.首先，在D盤新建一個文件夾作為項目的存放地，然後cd到目錄下，輸入命令，創建項目

vue init webpack vue-demo

　　2.等待模板下載成功後，會有一個交互式的選項讓你選擇：

? Project name vue-demo # 項目名稱，直接回車，按照括號中默認名字（註意這裏的名字不能有大寫字母，如果有會報錯Sorry, name can no longer 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? Yes # 是否使用 ESLint 作為代碼規範.
? Pick an ESLint preset Standard # 一樣的ESlint 相關
? Set up unit tests Yes # 是否安裝單元測試
? Pick a test runner 按需選擇 # 測試模塊
? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我選的NPM

　　3.安裝完成後，安裝提示，cd 到項目目錄, 執行命令 npm install 進行初始化。

To get started:

  cd vue-demo
  npm run dev

　　4.啟動項目

npm run dev

 DONE  Compiled successfully in 4014ms                                                   

 Your application is running here: http://localhost:8080

　　如果瀏覽器打開之後，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config裏的index.js 的 post

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {}, // 這裏可以配置跨域

    // Various Dev Server settings
    host: ‘localhost‘, // can be overwritten by process.env.HOST
    port: 8080, // 端口 就是改這裏
    autoOpenBrowser: false, // 這裏是ture的話，就會自動打開瀏覽器

　　我的端口沒有被占用，所以直接啟動成功，打開 http://localhost:8080 就能看到歡迎頁面

Vue開發環境配置（一）