首页 > 其他 > 详细

Vue项目搭建和结构分析

时间:2019-05-11 22:06:51      阅读:107      评论:0      收藏:0      [点我收藏+]

一、使用 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项目搭建和结构分析

原文:https://www.cnblogs.com/mxsf/p/10850134.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!