第一步，安裝node.js根據實際操作系統選擇安裝包
- 下載地址：https://nodejs.org/en/download/
- 打開Cmd命令行 輸入 node –v檢測安裝是否成功
第二步npm設置
大家都知道國內直接使用 npm 的官方鏡像是非常慢的，這裏推薦使用淘寶 NPM 鏡像。
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- Cmd命令行輸入 npm –v檢測安裝是否成功
第三步 安裝webpack
- npm install webpack –g
第四步 安裝腳手架 npm install vue-cli -g
- Vue –V 查看vue版本
好了準備工作完成，接下來就是新建項目
一 在硬盤上找一個文件夾放工程用的，在終端中進入該目錄
- cd 目錄路徑
- 輸入 vue init webpack 項目名稱 搭建vue項目, my-vue-demo 是你的項目名稱
- 配置需要安裝的vue環境
二 使用編輯器打開新創建的項目，直接拖過去就行，我用的vscode
三 項目目錄結構如下圖所示，我們所需要頁面文件就在src目錄下
- 具體樹結構（這是一個線上項目的樹結構，懶得針對性修改了，具體根據項目文件去改）可用於編寫markdown文件
├───node_modules----------------------node安裝npm依賴包
├───public----------------------------公共文件
│ │ favicon.ico-------------------圖標
│ │ index.html--------------------入口頁面
│ └───static------------------------源文件
├───dist------------------------------代碼生成目錄npm run build後會生成到dist
├───src-------------------------------開發目錄
│ │ App.vue-----------------------入口文件
│ │ main.js-----------------------入口文件，加載各種公共組
│ ├───common------------------------Foundation基礎目錄
│ ├───... ------------------------Foundation功能目錄
│ ├───middleware--------------------中間件目錄
│ │ componentInjection.js-----狀態注入
│ │ hookInjection.js----------鉤子注入
│ │ storeInjection.js---------組件注入
│ ├───modules-----------------------⭐⭐產品目錄
│ ├───demo--------------------------Demo對應後臺產品appcode（大小寫）
│ | ├───api----------------------接口
│ | ├───utils--------------------工具類
│ | ├───components---------------組件類
│ | ├───views--------------------視圖類
│ | └───README.md----------------說明文件
│ └───plugins-----------------------插件目錄
│───tests-----------------------------測試目錄
│───.browserslistrc-------------------瀏覽器兼容
│───.editorconfig---------------------代碼格式
│───.env------------------------------⭐開發環境配置
│───.env.development------------------開發環境配置
│───.env.production-------------------產品環境配置
│───.eslintrc.js----------------------格式化
│───.gitignore------------------------git上傳需要忽略的文件格式
│───.gitlab-ci.yml--------------------gitlab ci文件
│───babel.config.js-------------------ES6編譯配置
│───cypress.json----------------------E2E測試配置
│───Dockerfile------------------------Docker容器文件
│───nginx.conf.template---------------Nginx配置模板
│───package-lock.json-----------------package鎖定
│───package.json----------------------項目配置
│───postcss.config.js-----------------postcss配置
│───README.md-------------------------說明文檔
│───setting.js------------------------⭐代理配置
│───UPDATE.md-------------------------升級文檔
└───vue.config.js---------------------配置文件 更多配置https://cli.vuejs.org/zh/config/#devserver-proxy
四 執行 npm run dev 命令，啓動項目
- 啓動成功直接瀏覽器訪問即可
五 執行 npm run build命令，打包項目
- 打包成功會在項目目錄下生成dist文件