Vue入門:Vue項目創建及啓動

1.創建Vue項目存放地址

用於存放Vue項目,找個自己處理方便的地方。本人地址:D:Program FilesWorkspaceVue

2. 創建項目

進入cmd窗口 進入項目存放地址
執行命令【vue init webpack HelloWorld】創建Vue項目 [HelloWorld]爲項目保存文件夾名稱
clipboard.png

錄入項目名稱

clipboard.png

項目描述及作者

clipboard.png

項目構建
選擇第一項
clipboard.png

是否使用router

clipboard.png

是否使用ESLint

clipboard.png

是否使用單元測試

clipboard.png

是否使用e2e測試

clipboard.png

項目創建後是否執行安裝

選擇第一項 是

clipboard.png

創建成功後提示

clipboard.png

3. 啓動項目

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

clipboard.png

啓動成功後提示

clipboard.png

訪問瀏覽器

clipboard.png

  1. 項目結構說明(不完整)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章