Vue項目搭建和結構分析
阿新 • • 發佈:2019-05-12
tor readme ati span 效果 babel sta spa static
一、使用 vue-cli(腳手架)搭建項目
npm install -g vue-cli
vue init webpack gshop
cd gshop
npm install
npm run dev
訪問: localhost:8080
二、項目結構分析
gshop |-- build : webpack 相關的配置文件夾(基本不需要修改) |-- config: webpack 相關的配置文件夾(基本不需要修改) |-- index.js: 指定的後臺服務的端口號和靜態資源文件夾 |-- node_modules |-- src : 源碼文件夾 |-- main.js: 應用入口 js|-- static: 靜態資源文件夾 |-- .babelrc: babel 的配置文件 |-- .editorconfig: 通過編輯器的編碼/格式進行一定的配置 |-- .eslintignore: eslint 檢查忽略的配置 |-- .eslintrc.js: eslint 檢查的配置 |-- .gitignore: git 版本管制忽略的配置 |-- index.html: 主頁面文件 |-- package.json: 應用包配置文件 |-- README.md: 應用描述說明的 readme 文件
三、編碼測試
npm run dev 訪問: http://localhost:8080 編碼, 自動編譯打包(HMR), 查看效果
四、打包發布
npm run build npm install -g serve serve dist 訪問: http://localhost:5000
Vue項目搭建和結構分析