一、使用 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