前言

vue是一套用于构建用户界面的渐进式框架。我使用vue最直观的感受就是它组件化开发的高效率和高复用。接下来我将讲述从从零搭建vue框架。以下观点带有个人理解，有不对的地方请指正。

环境需求

在我们创建vue项目之前我们需要的环境配置

1. Node.js : Javascript运行环境
2. npm ： 包管理工具（同Node.js一同安装）
3. vue.js : 官方命令行工具   npm install vue -g  
4. wepack : 前端资源加载、打包工具   npm install webpack -g

vue全家桶

了解vue全家桶对我们创建项目的帮助是巨大的，以下是我个人都vue全家桶的理解

1. vue-router : 路由管理，主要用于多界面网页应用，如果界面和功能较少的网页可无需安装
2. vuex : 用于数据的缓存管理，针对数据使用频繁和数据多的场景
3. vue-resource：用于请求和响应处理，我们一般不使用它，更倾向于使用 axios 代替
4. vue-cli ：官方命令行工具
5. sass ：css 扩展语言，可以帮助我们减少 css 重复的代码，节省开发时间

安装流程及配置

这里我使用的是vscode，其他方式安装流程大致相同

1.创建项目   vue create 项目名称

2.选择配置

这是我根据自己需求进行的配置，其中第二点我在后面会详细讲解，其他的大家可以根据需求自行选择

• Please pick a preset               选择默认配置或者手动配置，此处我选的手动配置
• Check the features needed for your project     vue的一些配置选择，后面我会详细讲解
• Choose a version of Vue.js that you want to start the project with     选择的vue版本
•  Use history mode for router        router的模式选择，根据需要选择，我选的NO
•  Pick a linter / formatter config     代码样式规范选择
• Pick additional lint features          进行语法检查操作选择
• Where do you prefer placing config for Babel, ESLint, etc.    放置配置信息的文件夹选择
•  Save this as a preset for future projects       是否需要将以上配置作为以后项目的预配置

 3.这是配置过程的第二点，在这里我会详细讲解

• Choose Vue version         vue版本选择
• Babel           是否兼容低版本浏览器
• TypeScript       是否扩展JavaScript
• Progressive Web App (PWA) Support       是否支持渐进式Web应用程序 
• Router      是否配置路由
• Vuex          是否配置状态管理模式（相当于本地存储）
• CSS Pre-processors     是否配置CSS预处理器
• Linter / Formatter         格式化程序规范选择
• Unit Testing      是否创建单元测试
• E2E Testing         是否创建端到端测试

总结 

在终端运行 npm run serve （这里的命令是针对 vue3, 选 vue2 版本的应该是 npm run dev ） 就可以在浏览器打开你的vue项目。

好了，完成上述配置就可以开启你的vue之旅了。