何如使用脚手架搭一个项目
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
项目目录详解
1. build (构建脚本目录，配置webpack)
│ ├─build.js（生产环境的入口文件，为构建打包文件，会将源码进行构建（编译、压缩等）后打包）
执行”npm run build”的时候首先执行的是build/build.js文件
- loading动画
- 删除目标文件夹
- 执行webpack构建
- 输出信息
│ ├─check-versions.js（对node和npm的版本检测）
│ ├─dev-client.js （浏览器端代码，用于实现webpack的热更新）
│ ├─dev-server.js（开发环境入口文件）
- 检查node和npm的版本、引入相关插件和配置
- webpack对源码进行编译打包并返回compiler对象
- 创建express服务器
- 配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
- 挂载代理服务和中间件
- 配置静态资源
- 启动服务器监听特定端口（8080） 8.自动打开浏览器并打开特定网址（localhost:8080）
│ ├─utils.js（提供公共工具函数）
生成处理各种样式语言的loader，获取资源文件存放路径的工具函数
- 计算资源文件存放路径
- 生成cssLoaders用于加载.vue文件中的样式
- 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
│ ├─vue-loader.conf.js（处理.vue文件的配置文件）
│ ├─webpack.base.conf.js (所有环境公共webpack配置)
- 配置webpack编译入口
- 配置webpack输出路径和命名规则
- 配置模块resolve规则
- 配置不同类型模块的处理规则
│ ├─webpack.dev.conf.js (开发环境中webpack的配置入口)
在webpack.base.conf的基础上增加完善了开发环境下面的配置
- 将webpack的热重载客户端代码添加到每个entry对应的应用
- 合并基础的webpack配置
- 配置样式文件的处理规则，styleLoaders
- 配置Source Maps
- 配置webpack插件
│ ├─webpack.prod.conf.js（生产环境中webpack的配置入口）
│ └─webpack.test.conf.js（测试环境中webpack的配置入口）
2. config （构建配置目录，配置路径端口）
│ ├─index.js（主要的配置文件）
> 定义dev开发环境和build生产环境中所需要的参数，包含静态文件的路径、是否开启sourceMap等。
│ ├─dev.env.js
│ ├─prod.env.js
3. node_modules （依赖的node工具包目录,根据package.json npm install安装）
4. src （项目开发目录）
│ ├─assets（放一些静态图片资源的目录）
│ ├─components（放的是我们写的各种组件）
│ ├─router（定义路由）
App.vue（主组件，也是我们所有组件和路由的出口，渲染到index.html）
main.js（入口文件）
5. static （静态文件目录，存放我们需要使用的一些外部的js、css文件）
6. package.json （项目描述文件）
7. index.html（文件入口）
最后渲染页面的文件，就是导入了app.js(以main.js 为入口文件打包之后生成)的index.html文件
怎么样发布生产
npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,
npm run build的时候, 一开始就会提示Built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work., 因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:
cd dist
npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了.
hs
或者打包的命令文件是config/build.js
将build对象下的assetsPublicPath中的“/”，改为“./”即可
现在再重新打包一次 npm run build，刷新你的页面，就可以看到啦
