Vue3.0项目创建步骤

（1）新建一个用于存放Vue3.0项目的文件夹，我创建的目录是C:\Program Files\project

（2）在【命令提示符】窗口输入以下命令，进入新创建的目录

cd C:\Program Files\project

（3）在【命令提示符】窗口输入以下命令，进入Vue3.0项目的创建向导

vue create vue3-demo

（4）这里选择项目模版进行安装，我选择>Manually select features

• Defaul（Vue2babel，eslint）：默认预设配置，快速创建一个Vue2.0项目
• Defaul（Vue3babel，eslint）：默认预设配置，快速创建一个Vue3.0项目
• Manually select features：手动选择项目配置，更灵活地配置项目

(5)Vue-cle提供以下特性供用户选择，根据项目需求进行添加配置项，通过上下箭头键进行配置项切换，使用空格键进行选中/反选，选择好了按回车键

• Choose vue version ：是否进行Vue版本的选择
• Babel ：使用Babel将源代码进行转码（ES6=>ES5）
• TypeScript ： 使用TypeScript进行源码编写，使用TypeScript可以编写强类型的javaScript，对开发有很大好处
• Progressive Web App（PWA） Support ： 使用渐进式网页应用（PWA）
• Router ：使用Vue路由
• Vuex ： 使用Vuex状态管理器
• CSS Pre-processors ： 使用CSSS预处理器，如Less、Sass等
• Linter/Formatter ： 代码风格检查和格式化
• Unit Test ：使用单元测试
• E3E Testing ：使用E2E Testing,是黑盒测试的一种

（6）这里是Vue2.x和Vue3.x两种项目类型，选择Vue3.x并按回车键

（7）询问是否使用history路由模式，如果启用路由模式，项目生成后，有可能会出现打开的浏览器页面是空白，此处不选择history路由模式，输入字符n并按回车键

（8）需要选择一种CSS预处理器，这里选择Sass/SCSS。CSS预处理器用一种专门的编程语言进行Web页面样式设计，然后再编译成正常的CSS文件以供项目使用。

• Sass/SCSS：Sass是采用Ruby语言编写的一种CSS预处理语言，是最成熟的CSS处理语言。最初是为了配合HAML（一种缩进式HTML预编译器）而设计的，因此有着和HTML一样的缩进式风格。
• Less：是一门CSS预处理语言，它扩充了CSS语言，增加了如变量、混合函数等功能，让CSS更易于维护，方便制作主题和扩充。
• Stylus：可以省略原生CSS中的大括号，逗号，分号，类似于python语言风格，语法灵活，但是维护起来比较麻烦

（9）选择一种代码格式化检测工具，选择ESLint+Standard config，然后按回车键

（10）选择代码检查方式，选择Lint on save

• Lint on save ：保存时检查
• Lint and fix on commit（requires Git）：提交时检查

（11）设置Babel、PostCSS、ESLint等配置文件如何存放，为了方便配置清晰好看，选择为每个配置创建单独的文件，选择In dedicated config files 。

• In dedicated config files ：放到单独配置文件中
• In package.json：放到package.json中

（12）是否需要保存当前配置，为以后生成行项目时快速构建，这里输入n并按回车键，不保存

（13）项目安装完后，进入项目vue3-demo目录，运行命令

npm run serve

（14）在浏览器地址栏中输入http://localhost:8080/，可以访问生成项目的主页，浏览器中显示的结果如下