1.創建Vue項目存放地址
用於存放Vue項目,找個自己處理方便的地方。本人地址:D:Program FilesWorkspaceVue
2. 創建項目
進入cmd窗口 進入項目存放地址
執行命令【vue init webpack HelloWorld】創建Vue項目 [HelloWorld]爲項目保存文件夾名稱
錄入項目名稱
項目描述及作者
項目構建
選擇第一項
是否使用router
是否使用ESLint
是否使用單元測試
是否使用e2e測試
項目創建後是否執行安裝
選擇第一項 是
創建成功後提示
3. 啓動項目
進入項目根目錄下 執行【npm run dev】
啓動成功後提示
訪問瀏覽器
- 項目結構說明(不完整)
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件,加載各種公共組件
|-- static // 靜態文件,比如一些圖片,json數據等
| |-- data // 羣聊分析得到的數據用於數據可視化
|-- .babelrc // ES6語法編譯配置,裏面有一些插件,這些插件的作用是代碼的轉換
|-- .editorconfig // 編譯器的配置,定義代碼格式
|-- .eslintignore //忽略語法檢查的目錄文件
|-- .eslintrc.js //編譯規則配置文件,規則定製文件,規則編譯不過的時候可以在這裏配置爲0
|-- .gitignore // git上傳需要忽略的文件格式,
|-- favicon.ico // link圖標
|--.postcssrc.js
|-- index.html // 入口頁面
|-- package.json // 項目基本信息如:可以配置script腳本 ^上箭頭代表可以安裝當前版本及以上的版本
|-- README.md // 項目說明