1新建一个用于存放Vue3.0项目的文件夹我创建的目录是C:\Program Files\project2在【命令提示符】窗口输入以下命令进入新创建的目录cd C:\Program Files\project3在【命令提示符】窗口输入以下命令进入Vue3.0项目的创建向导vue create vue3-demo4这里选择项目模版进行安装我选择Manually select featuresDefaul[Vue2]babeleslint默认预设配置快速创建一个Vue2.0项目Defaul[Vue3]babeleslint默认预设配置快速创建一个Vue3.0项目Manually select features手动选择项目配置更灵活地配置项目(5)Vue-cle提供以下特性供用户选择根据项目需求进行添加配置项通过上下箭头键进行配置项切换使用空格键进行选中/反选选择好了按回车键Choose vue version 是否进行Vue版本的选择Babel 使用Babel将源代码进行转码ES6ES5TypeScript 使用TypeScript进行源码编写使用TypeScript可以编写强类型的javaScript对开发有很大好处Progressive Web AppPWA Support 使用渐进式网页应用PWARouter 使用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/SCSSSass是采用Ruby语言编写的一种CSS预处理语言是最成熟的CSS处理语言。最初是为了配合HAML一种缩进式HTML预编译器而设计的因此有着和HTML一样的缩进式风格。Less是一门CSS预处理语言它扩充了CSS语言增加了如变量、混合函数等功能让CSS更易于维护方便制作主题和扩充。Stylus可以省略原生CSS中的大括号逗号分号类似于python语言风格语法灵活但是维护起来比较麻烦9选择一种代码格式化检测工具选择ESLintStandard config然后按回车键10选择代码检查方式选择Lint on saveLint on save 保存时检查Lint and fix on commitrequires 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 serve14在浏览器地址栏中输入http://localhost:8080/可以访问生成项目的主页浏览器中显示的结果如下
