一、安装
1、安装node.js。官网地址：https://nodejs.org/zh-cn/
2、安装Visual Studio Code。Visual Studio Code - Code Editing. Redefined
3、安装webpack。
npm i webpack -g #全局安装webpack
npm i webpack-cli -g #全局安装webpack脚手架
webpack -v #查看 版本4、全局安装脚手架
npm i @vue/cli -g #全局安装vue脚手架
vue -V #查看vue脚手架版本 @4.5.12
如果使用npm 安装脚手架速度很慢时,转成cnpm,通过淘宝镜像就行下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i @vue/cli -g 二、创建项目
新建demo文件夹之后，拖进vscode软件中，右键在集成终端打开，执行以下操作。
1、通过脚手架创建项目，步骤如下
vue create 项目名称
cd 项目目录 #进入项目目录
npm run serve #启动项目
项目运行在: http://localhost:8080（1）vue create demo_hou之后会出来一下内容
Default为默认配置，只有Babel和eslint
选择第三个手动配置
（2）下面的星号代表选择，Choose Vue version、Babel、Router、Vuex、CSS预处理器、Linter / Formatter格式检查
（3）下面是选择版本，2.x和3.x的版本，我选择了2.x的版本。
（4）是否使用路由的 histroy 模式（Yes）
（5）选择一个css预处理器（Less）
（6）选择一个eslint配置（ESLint + Standard config）
（7）选择什么时候进行eslint代码规则检查（Lint on save）保存的时候
（8）将babel、postcss、eslint这些配置文件放哪（In dedicated config files）选择第一个，独立文件放置
（9）是否保存这份预设配置，选择是的话，会让你填写一个预设文件的名字，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。我这里没有保存，选择了n
（10）最后一步，进入demo_hou，通过npm run serve运行
二、2.1下面是生成的目录结构
node_modules： 这个文件夹里面是我们项目需要的一些依赖；
public： 静态文件夹，这个文件夹中的资源不会被webpack编译，构建生产包的时候，会被直接拷贝一份；
assets： 是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译；
components： 文件夹中存放我们的组件；
views： 文件夹中存放我们的页面；
App.vue： 这个文件是我们所有vue页面的顶层文件；
main.js： 是我们整个项目的入口文件；
router.js： 是路由的配置文件；
store.js： 是vuex的配置文件；
.browserslistrc： 文件用于给开发者设置浏览器版本的范围；
.eslintrc.js： eslint配置文件；
.gitignore： 需要git忽略的文件；
babel.config.js： babel的配置工具；
package-lock.json： 记录项目依赖中各个依赖之间的关系和版本，防止npm包中有不遵守“相同大版本号的同一个库包，其接口符合兼容要求”
这一规范，导致项目运行报错；
package.json： 项目的描述文件，包括项目名、依赖的版本、作者、命令、入口文件等信息。
README.md： 项目的说明文档，项目介绍、License、一些命令（例如：启动命令、打包命令、单元测试命令等）
