ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Vue3.0项目创建步骤

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([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/,可以访问生成项目的主页,浏览器中显示的结果如下

返回列表