1. 創建Vue項目存放地址

用于存放Vue項目，找個自己處理方便的地方。本人地址：D:\Program Files\Workspace\Vue

2. 創建項目

進入cmd窗口 進入項目存放地址

執行命令【vue init webpack HelloWorld】創建Vue項目 [HelloWorld]為項目保存文件夾名稱

?

錄入項目名稱

?

項目描述及作者

?

項目構建

選擇第一項

?

是否使用router

?

是否使用ESLint

?

是否使用單元測試

?

是否使用e2e測試

?

項目創建后是否執行安裝

選擇第一項 是

?

創建成功后提示

?

4. 啟動項目

進入項目根目錄下 執行【npm run dev】

?

?啟動成功后提示

?

?訪問瀏覽器

?

5. 項目結構說明（不完整）

|-- 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 // 項目說明

?

轉載于:https://www.cnblogs.com/LFBlog/p/10740496.html

總結

以上是生活随笔為你收集整理的Vue入门：Vue项目创建及启动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。