vue-cli2配置使用

Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

1. 前提是本地安装了node、npm

2. 全局安装 vue-cli
   $ npm install vue-cli -g

3. 创建一个基于 webpack 模板的新项目（my-project是项目名）
   $ vue init webpack my-project
   

   

   vueInit.png
   
   配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。
   目录结构是这样的：
   
   

   目录.png

4. 安装需要的依赖（babel-loader，less-loader啥的）
   npm install XXX

5. 启动项目
   $ npm run dev

6. 如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

   
   
   

   changePort.png
   
   

   将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

   
   
   

   changePort.png

7. 打包上线
   自己的项目文件都需要放到 src 文件夹下
   项目开发完成之后，可以输入 npm run build 来进行打包工作
   npm run build
   打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
   项目上线时，只需要将 dist 文件夹放到服务器就行了

参考：https://www.cnblogs.com/wisewrong/p/6255817.html