Vue-使用webpack+vue-cli搭建项目

1、准备

安装NodeJs + 安装Webpack + 配置环境变量 

技巧使用： 

　　1. npm 淘宝路径配置：npm config set registry=https://registry.npm.taobao.org
　　2.查看npm命令列表 =>   $ npm help

2、搭建项目

一、全局安装vue脚手架工具 vue-cli

　　npm install vue-cli -g

二、初始化 （项目名小写）

　　 vue init webpack project  或 vue init webpack-simple project   # 前者构建的应用丰富于后一个　

项目基本信息配置：

　　Project name (demo-one) # 项目名称
　　Project description (A Vue.js project) # 项目描述
　　Author 做者
       Vue build (Use arrow keys) # 直接回车 选择runtime+compiler
　　Install vue-router? (Y/n) # 是否安装Vue路由，也就是之后是spa（但页面应用须要的模块）
　　Use ESLint to lint your code? (Y/n) # 使用 ESLint 代码检测工具
　　Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
　　Setup unit tests with Karma + Mocha? (Y/n) # 是否须要单元测试工具 暂时不须要 n 否
　　Setup e2e tests with Nightwatch? (Y/n) # 是否安装端到端测试工具 暂时不须要 n 否
       Should we run npm install for you after the project has been created? 在建立完项目以后是否须要自动运行npm install来下载第三方包 我这里选择第一个npm安装

三、安装依赖包 node_modules

　　npm install

四、运行项目

　　npm run dev

3、项目说明

一、npm install安装的是什么呢？咱们刚刚在 vue init 初始化的时候会生成一个 package.json 文件

npm install 则会安装package.json中写的须要依赖的第三方包，包括dependencies和devDependencies
//若是该安装方式太慢，可使用cnpm淘宝代理镜像 
安装好后就 能够 npm run dev 运行项目了

二、vue-cli初始化文件目录结构详解

！！！为何把这里的App.vue称为根组件，main.js称为入口文件呢？

在main.js（入口文件）中App.vue（根组件）import进来了，挂载在了index.html（主页面）id为app的div上。也就是说，挂载在index.html（主页面）的组件就是根组件，把根组件挂载在主页面的文件就是入口文件。

三、如何配置 npm run dev 在浏览器后自启动项目

经过修改config中的index.js文件把autoOpenBrowser改成true~下次运行npm run dev或者npm start后即会自动启动页面

4、开发过程当中遇到的跨域问题

因为还在script标签开发的方式下，前端文件和后端文件都在同在apache服务器下，直接请求本机同一个端口的文件并不属于跨域。可是在vue-cli方式下，由node.js起的一个临时的服务器占用的是8080端口和后端所方式的文件不处于同一个端口号，这就出现了跨域的问题。
解决方法：修改config index.js中的proxyTable

在main.js（入口文件）中加入一行Vue.prototype.HOST = '/DNA'
以请求的url地址为url: this.HOST+"/insert/get_data"为例子对proxyTable作一个说明
请求的url为/DNA/insert/get_data,因为请求的url中包含了proxyTable中配置了的/DNA,这时候Node.js代理服务器就能够发挥做用了。Node.js会去请求http://localhost/repo/DNA/ins...，把请求获得的接口返回给前端。
为啥是http://localhost/repo/DNA/ins...，下面作一下讲解

路径重写有什么用呢？若是你程序得接口原本就有这个路径地址，你能够不须要重写，若是没有就须要重写，把其重写为空，我这个程序接口其实原本就有/DNA,其实我这里能够不须要重写，而后把target改成'http://localhost/repo'

5、关于打包

vue-cli已经把打包的东西配置好了，只须要经过npm run build 或者 node build/build.js便可对程序进行打包。
为啥输入npm run build能够进行打包呢也是package.json配置好的缘由

打包出来的文件结果，默认状况，打包生成的文件会放在vue-demo下的dist文件夹，注意双击html是不能打开这个文件的（双击打开显示的是一片空白），打包出来的文件须要放在服务器上才能跑起来，之前我双击打开看到白白的文件，一直觉得是我打包出错了哈哈哈。

至于static文件和index.html存放的路径是能够修改的，能够修改成任意的路径，方便打包后的程序的运行。
修改config文件夹下的index.js文件中build对象的参数便可。

 

原文做者：风子猪原文地址：https://segmentfault.com/a/1190000015680030