vue学习笔记（1）——创建项目

github
vue学习笔记（2）主要介绍项目的基本设置，如axios设置和项目颜色控制
vue学习笔记（3）主要介绍vue的router简单用法
vue是一个前端框架，通过将html中的各种dom渲染成vue自己的虚拟dom，然后通过虚拟dom进行数据双向绑定完成数据的渲染。这样在编写页面的时候大大提高了编写效率，并且学习曲线比较平缓，对h5有基础的认识就可以进行相应的开发了。
vue的项目创建可以基于脚手架进行相关的设置，集成webpack很方便的进行vue项目的打包，这样打包后的文件可以直接进行nginx或者web服务器工具，很方便的进行配置。

vue优点

1、数据双向绑定
2、学习成本低，学习曲线平缓
3、前后端分离

vue项目创建

一、安装npm，vue，vue-cli
在vue构建的时候一般使用npm安装，也可以使用cnpm，
去nodejs官网去下载对应的安装包即可安装node，而npm是继承在nodejs的包管理工具。同时就安装了npm，这一步大家就自己探索吧。
然后下一步就要装，vue和vue-cli了

npm install vue
npm install @vue/cli
#全局安装
npm install -g vue
npm install -g @vue/cli

#脚手架2.x版本
npm install -g vue-cli

脚手架有两个版本，一个是2.x版本，一个是3.0版本，我建议使用3.0版本，其有更强大的图形管理界面和更简单的配置，可以通过使用新增文件的方式进行配置。

二、使用vue-cli创建项目
在需要创建项目的文件夹里

vue create hello-world #项目名称

然后会出现配置命令行，这个时候可以根据提示进行项目的配置，新学者可以使用default进行默认创建项目，然后通过创建好的项目结构，了解一下每一个目录文件的具体用处。然后再通过自定义配置创建不同的项目，来查看每一个配置对于初始项目添加的是哪些内容，来进行整体项目的了解。

自定义配置是配置项目中需要使用到的插件进行配置，主要是babel，使用的js还是ts，是否使用pwa（一般h5项目不需要），router，vuex，css预加载器，代码检查，单元测试，e2e测试这几项内容进行配置。一般的话可以勾选babel，router，vuex（看项目中是否会用到状态管理），代码检查等，按需勾选。

配置好了后就可以进入项目中进行项目结构的了解了。

demo项目文件目录

项目结构非常简单，主要有三个文件夹：

• node_modules
  存放项目中所需要的基础插件
• public
  存放的是入口文件index.html和静态文件
• src
  主要工作目录，用于存放项目中使用到的图片资源以及相关的组件，和页面，router，状态管理等文件
  还有几个比较重要的文件
• babel.config.js
  配置babel，选择js的编译方式
• package.json
  用于项目配置，主要设置项目名称，版本号，一些脚本如打包，sever，测试脚本。还有项目依赖和dev环境依赖，eslint校验方式等设置。
• vue.config.js （默认没有自己按需创建）
  脚手架的相关配置，具体可以查看vue-cli配置

基本上vue项目创建就先介绍到这里了，如果对于vue语法有不了解的可以去vue官网了解一下

加油吧，快去创建自己的vue项目吧！