我们实际在开发项目的时候一般不会选择向官网那样直接在html文件中引入vue，而是用vue的脚手架去搭建项目。脚手架完成了项目的编译，打包，压缩，配置，我们无需自己在手动编写webpack位置，直接使用相关的命令即可完成，真可谓是事半功倍。
一、想使用Vue脚手架需要先安装Node 环境。
在浏览器输入http://nodejs.cn/进入node官网，点击下载，可以看到node有各种系统的安装包，我们点击windows安装包.msi的64位进行下载，下载完双击安装包，勾选我同意，选择安装路径，然后下一步就好了。
打开cmd，输入node -v 检测是否安装成功
node -v然后同样的在cmd输入m -v检测npm是否安装
npm -vnpm是node的包管理工具，安装node的同时直接就安装好了npm
但是国内npm的服务是被墙的，但是我们可以把npm的源设置成淘宝镜像的源，更改npm下载源可以使用以下命令
npm config set registry http://registry.npm.taobao.org/看到这个输出，淘宝镜像跟新成功，以后下载js模块就快多了
二、安装vue的脚手架@vue/cli
使用命令npm install -g @vue/cli 安装Vue脚手架
npminstall-g @vue/cliVue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。
-g代表全局安装
输入vue -V 检测是否安装成功
vue -V
三、创建项目
在cmd进入到你想创建项目的目录
通过命令创建项目 vue create vue-demo
vue create vue-demo1、选择预设
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。上下键切换，回车键确定选择。
如果你之前保存了自己的预设，这里也可以显示。自己的预设保存在当前用户主目录.vuerc文件中，可以对其进行编辑。
此处我们选择使用手动选择 manually select
2、选择插件
空格键选择，a全选，i反选
接下来对每一个插件进行介绍
Babel是js的编译工具，可以将我们项目中所用的js新特性编译成浏览器支持的js版本。一些es6的语法，在一些老版本的浏览器中还没有得到全面的支持（更不要说es7等更新的语法），为了防止项目运行在老版本的浏览器中报错，我们需要对我们的代码进行编译。
TypeScript是微软开发的一种开源的强类型的编程语言。是js的超级，对面向对象编程表现较好，TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，以其良好的静态类型检查等优点被越来越多的开发者所喜欢。
PWA是一种先进的理念，可以让网站像原生应用一样放在设备的主屏，支持消息推送等功能。
Router是vue的官方的路由管理器，构建vue制作单页面应用的神器。
Vuex是一个专门为vue应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化。
CSS Pre-processors，css预处理插件有很多，目前比较流行的有less、scss、stylus等，选择less作为css的预处理插件。
Linter / Formatter插件是用来检测你代码是不是符合一些规范的（包括缩进、写法等），而且还有代码格式化的功能，我觉得对于项目开发，对于开发者良好的编码规范的养成都是有好处的。
Unit Testing 单元测试
E2E Testing 端端测试
此处我们选择
3、选择路由模式
路由插件有两种模式，一种为hash模式，另一种为history模式，这两种模式最显著的区别为hash模式下浏览器的url地址中会有#，而history模式没有，hash模式下路由切换只会变化#后面的路径。此处我们选择n即哈希模式
4、选择CSS预处理器
css预处理插件有很多，目前比较流行的有less、scss、stylus等，选择less作为css的预处理插件。
5、选择插件的配置信息存放位置
你想把这些工具的配置放在哪，第一个选项为放在单独的配置文件中，第二个选项为都写在package.json文件中。我一般选第二个，存放在package.json中
6、是否保存预设
是否将以上信息保存预设方便下次创建工程时选择相同配置
如果保存预设会在当前用于目录的.vuerc文件中存储预设信息
7、创建项目成功提示
四、项目编辑器选择
可以选择HbuilderX与VSCode
二者各有有缺，哪一个都可以满足大多数需求，本教程使用Hbuilder
五、项目目录介绍
创建项目默认生成目录
1、node_modules 这个文件夹里面是我们项目需要的一些依赖。
2、public 静态文件夹，这个文件夹中的资源不会被编译，构建生产包的时候，会被直接拷贝一份。
3、src 项目源文件目录。
3.1、assets 是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译。
3.2、components 文件夹中存放我们的组件。
3.3、router 项目路由插件vue-router的配置文件。
3.4、store 项目数据状态管理器vuex的配置文件。
3.5、views 文件夹中存放我们的页面。
3.6、App.vue 这个文件是我们所有vue页面的入口组件。
3.7、main.js 是我们整个项目的入口文件。
4、.gitignore 需要git忽略的文件
5、babel.config.js babel插件的配置工具
6、package.json 项目的描述文件，包括项目名、依赖的版本、作者、命令、入口文件等信息。
7、package-lock.json 记录项目依赖中各个依赖之间的关系和版本
8、README.md 项目的说明文档
到此，我们的项目基本上已经搭建完了。
项目运行
npm run serve项目发布
npm run build