(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([Vue2]babel,eslint):默认预设配置,快速创建一个Vue2.0项目
- Defaul([Vue3]babel,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/,可以访问生成项目的主页,浏览器中显示的结果如下