从script标签引入到vue-cli开发方式的转换

前言

vue是一款渐进式的框架，何为渐进式，我的理解就是可以根据你的需要来按需引入vue所提供的服务而没有一定的要求。它不同于Angular.js，当你使用Angular.js的时候你就要必须使用它的依赖注入、模块机制等等。
鉴于vue是一款渐进式的框架，vue-cli开发经验又较少，一开始选择了scrip标签引入的方式进行开发。

script标签引入开发方式遇到的问题

通过在html页面中引入下面一行代码，即可在页面中使用vue这个框架

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

由于官方文档也说了不推荐新手直接使用vue-cli，对于小白来说，script标签引入的方式还是很友好的，毕竟这种开发方式不需要使用到Node.js构建工具。
直接在script标签/js文件中写入开发时需要使用的代码，如下图所示。

但是看完图片之后大家有发现一个问题嘛~才刚开始开发代码的行数已经接近2000行了~正在我开发的如痴如醉的时候我隔壁的同事给了我一个温馨提示：你这代码后期维护会很麻烦喔！现在都2000行了，以后怎么办！（感谢哈哈哈，是你给了我这个转换的机会）
由于用这个开发方式是不可以使用.vue文件的，因此并不能用.vue文件把一个个组件拆分开来。
好呗~那把它分为一个个js文件，用script标签的方式引入，这样子看起来会舒服一点，维护性也会好一点，起码不用一次看几万行代码那么痛苦（自己看还好，如果以后同事接手你的项目，他可能真的要哭了）

这种开发方式貌似没什么毛病，虽然没那么的高大上但怎么说还是能用的。
别别别，别说这么早，把暂且写好的程序拿去ie上跑一跑（ie9及以上），哭了，白白的，啥都看不到。ie是不支持es6语法的（箭头函数啥啥啥的都是不支持的）。然后vue组件里面的template模块中经常会使用到··模板字符串的写法，但是在ie上是不支持的，但是不用模块字符串来写的话又特别特别特别的麻烦。自己引入个babel来进行语法的转换或许是个方法（这个我没试过）。
总结一下script标签引入方式的弊端

• 代码的可维护性差，阅读体验不太好
• ie的兼容性问题

总而言之，我觉得组件化工程化的开发方式在这时候就显得特别的珍贵了，vue-cli存在的意义也就凸显出来了。在脚手架的开发中，组件化的开发方式使得代码的可维护性有了大大的提高，工程化的开发方式则帮你处理了很多很多的问题（例如ie的兼容器问题），如果新手使用的是vue官方提供的vue-cli进行项目的搭建，其已经帮我们把webpack和babel配置好，把程序跑起来就能自动编译成es5的语法，对于自己来说啥都不用管，省事省心。

vue-cli开发方式

使用这个开发方式需要有一个前提，就是电脑已经安装了Node.js构建工具。

安装完Node.js之后在命令行输入node -v和npm -v可以安装相应的版本（在新版的Node.js的安装过程中会自动安装npm包管理工具）
npm是一款包管理工具，可以使用它安装一些第三方的包到本地进行使用。包管理工具除了npm还是yarn，yarn是新一代的包管理工具，具有不少的优点，由于这里使用的是npm包管理工具，yarn就不做介绍了。

安装完Node之后，就可以开始搭建了

1、先安装vue-cli，在命令行输入npm install vue-cli -g（-g的意思是全局安装，这里采取的方式是全局安装）
//如果该安装方式太慢，可以使用cnpm淘宝代理的镜像

安装成功后再命令行输入 vue -V（注意V是大写的）可以看到当前vue的版本

2、vue-cli安装完成就可以使用它来搭建我们的项目

• 在存放项目目录的文件夹的空白处按住shift点击右键，打开当前路径的命令行窗口

• 在命令行中输入vue init webpack vue-demo来构建一个vue的项目（vue-demo也是你创建后文件夹的名字）

按下回车后，会弹出很多选项
? Project name (vue-demo) 项目名称 可以直接回车 或 填入名称信息
? Project description (A Vue.js project) 项目描述 可以直接回车 或 填入描述信息
? Author 作者 可直接回车 或 填入作者信息
? Vue build (Use arrow keys) 直接回车 选择runtime+compiler
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates ......
? Install vue-router? (Y/n) 是否安装vue路由 y 是
? Use ESLint to lint your code? (Y/n) 是否使用eslint规则 n 否 建议否
? Set up unit tests (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来下载第三方包 我这里选择了第三个 no
Yes, use NPM
Yes, use Yarn
>No, I will handle that myself

• 由于选择了no，自己安装，因此我们要cd进去刚创建的vue-demo目录中使用npm install来安装第三方包

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

npm install 则会安装package.json中写的需要依赖的第三方包，包括dependencies和devDependencies
//如果该安装方式太慢，可以使用cnpm淘宝代理镜像
npm install把第三方包安装完成后，在当前路径下（我这里是vue-demo文件夹下的路径）输入 npm run dev 即可运行项目

可以看到项目已经在临时搭建的Node服务器上跑起来了，输入npm run dev后网站并不会自动打开，如果想输入npm run dev后网站自动打开，修改一下配置即可，下面会说。
至于为什么输入npm run dev就可以把程序跑起来了呢？这个package.json的配置有关

这是配置好的一系列简写，npm start和输入npm run dev是一样的，程序照样也可以跑起来，但是需要你配置好或本来配置好。
没错，程序这样子就跑起来了，^_^下面我来介绍一下使用vue-cli初始化后文件目录结构以及做一些简要的说明

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

先主要介绍一下src里面的核心文件，因为开发需要写的文件几乎都在这里面的，别的目录下的都是一些配置的问题。

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

下面我们来观察App.vue（根组件）、main.js（入口文件）和index.html（主页面）的关系

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

除了根组件以外的组建一般写在components文件夹里面，可以通过在根组件中import组件的方式让其展示出来，或者配置好router路由，让组件在router-view中显示出来。

• 上文曾提到的npm run dev后不会自动在浏览器中打开页面，可以通过修改config中的index.js文件

把autoOpenBrowser改为true~下次运行npm run dev或者npm start后即会自动启动页面

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

• 跨域问题

由于还在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'

关于打包

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对象的参数即可。

总结

组件化工程化的开发方式还是非常舒服非常省心的，现在拿去ie（ie9及以上）跑再也不担心一片白了哈哈哈哈。vue/vue-router/vuex等的知识不在这里介绍了，大家可以看官方文档哦^_^