Vue cli + Development Server 如何开始一个中大型项目

中大型项目的基础

 

 

先跟大家放一张流程图 在我们运行我们Vuejs的时候 我们需要一个server 去抓取数据

不管你是本地运行还是线上运行 server才能串联整个文件

 

这里我们只是会用到server 但是我们不会去完成一个 

如果大家想看如何完成一个server 我也有几篇很详细的讲解：

Node.js WebSocket Server // 模式 应用 创建实时群聊天界面 https://blog.youkuaiyun.com/Cvan123/article/details/83461287

Node.js Express web frame// 最受欢迎的框架 Express          https://blog.youkuaiyun.com/Cvan123/article/details/83389252

这上面就是俩个基础的server搭建

 

Development workflow

中大型的项目我们有很多的文件要一并运行 给我们最基础的code加工 加入方程

workflow 确保我们将加工好的文件运输到server里面

好处：

让我们写出有规格的代码

减少压缩以后的文件大小

我们不用到了server 浏览器中再去运行 减少30%运算加载速度

 

Vue Cli

安装

你要先下载 node js

然后

npm install -g vue-cli

选择

你要选择一种模式

一般来说第二种满足个人需求

第三种加入一些css test

 

然后就是创建项目

vue init webpack-simple vue-cli

第三个arg是你选的model 第四个是创建文件夹

创好之后

npm install 去安装必要组件

再输入 npm run dev

这时候你的浏览器应该能自动进入 8000 host

 

我们来看这些命令我们创造了什么file  打开IDE

 

在这里 我们要谈论一个术语

Single File Template

这种文件允许我们在创造过程中 会帮我们编译HTML

它会包含 css template 和 JS 

能解决很多问题