开始 Vue 框架搭建项目实践是检验真理的唯一标准前端架构发展最开始接触项目时基本都是像 ASP 或者 JSP 的方

实践是检验真理的唯一标准

前端架构发展

最开始接触项目时基本都是像 ASP 或者 JSP 的方式，里面嵌套前端。后来开始接手的项目基本就是 HTML+CSS+JavaScript 的方式。前端请求服务端数据资源基本是通过 XMLHttpRequest 或者使用 JQuery 封装 XHR 的 Ajax。

服务端渲染到客户端渲染，前后端不分离到前后端分离。到现在主流的前后端分离的架构方式让前端可以更加侧重于页面、样式、交互、数据渲染等。而后端就更专注于业务逻辑处理和数据库交互。

前端部署

在前后端未分离时前端都是依赖服务端的。前后端都部署同一台服务器上，然后由服务端返回页面内容浏览器进行渲染。在 ajax 出现后，前端就开始慢慢可以自成体系独立开发部署。

图1: 请求 -- 服务端 -- 返回页面DOM ，浏览器渲染

图2: UI --数据 --DOM

图3:

以上就是我个人的理解。接下来就是进入正题，使用 Vue 框架搭建项目并学会部署项目。

项目搭建配置

前期的一些必备的环境准备：

Node
cnpm
vue-cli

搭建项目

基本搭建 Vue 项目的命令：vue init webpack {project_name}。使用你自己想创建的项目名称，也可以先创建一个项目文件夹，然后在项目文件夹下执行命令：vue init webpack。执行命令后就可以根据提示选择自己的想要的配置。

$ vue init webpack vue-be

? Project name vue-be  // 项目名称
? Project description A Vue.js project //项目描述
? Author helloYa  // 作者
? Vue build runtime // Vue 种类，会提供2种类型：Runtime+Compiler 运行时编译，Runtime-only ：只运行，可以选择第二种，编译的工作由webpack 来完成
? Install vue-router? Yes  // 安装 vue-router
? Use ESLint to lint your code? Yes  // 使用 eslint 规范代码
? Pick an ESLint preset Standard //选择一个ESLint预设标准
? Set up unit tests No  // 设置单元测试，我这里是先不使用
? Setup e2e tests with Nightwatch? No // 端不端测试
? Should we run `npm install` for you after the project has been created? (recommended) yarn // 包管理工具选择，可根据自己习惯选择，我这里选择yarn

这样就可以了，接下来就是直接安装依赖然后启动服务，访问相应的地址就可以出现页面了。

打包部署

要将该项目部署到服务器上，就需要进行打包，直接在项目目录下执行命令：npm run build或者 yarn build。打包后的静态文件都会放在./dist 文件夹下。一些相关的