新建vue-cli项目完整步骤

简介: 新建vue-cli项目完整步骤

段时间电脑重新装机,导致之前安装的环境全部需要重新安装,加上最近要写个移动端H5项目,思来想去,还是用vue脚手架搭建吧

image.png

没有安装,那就安装下

npm install -g @vue/cli

复制

装的版本比较高,创建项目就需要init了

vue create my-project

复制

接下来就开始创建我们的项目

image.png

这里有三个选择

  • default ([Vue 2] babel, eslint) 默认套餐,提供 babel 和 eslint 支持。
  • default (Vue 3 Preview) ([Vue 3]babel, eslint) 新版本,Vue3预览版本
  • Manually select features 自己去选择需要的功能,提供更多的特性选择。

如果选择默认的,等待完成后就可以了,这里我选择了第三个,上下方向键切换选项,enter键选中

image.png

vue-cli 内置支持的功能特性,可以多选:使用空格键选中当前特性,对于每一项的功能,此处做个简单描述:

  • TypeScript 支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support PWA 支持。
  • Router 支持 vue-router 。
  • Vuex 支持 vuex 。
  • CSS Pre-processors 支持 CSS 预处理器。
  • Linter / Formatter 支持代码风格检查和格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。

image.png

我还是选择2.x

image.png

路由模式,enter键

image.png

选择ESLint + Prettier,enter键

image.png

回车

image.png

方便统一管理和入手。选择第二个

image.png

这个自己选择,说的意思是这个配置是否以后项目的配置

image.png

我还是用yarn

image.png

此时已经开始初始化我们项目

image.png

已经初始化完成,包括项目所用依赖,我们直接运行就可以

yarn serve

复制

image.png

启动完成

image.png

相关文章
|
2月前
|
存储 JavaScript
解锁Vuex高级玩法:模块化与插件共舞,让你的Vue项目状态管理如虎添翼!
【8月更文挑战第27天】Vuex是一款专为Vue.js应用程序设计的状态管理模式及库,它通过集中管理组件状态来确保状态变更的可预测性。在大型应用中,采用模块化管理可以让代码结构更加清晰,同时利用插件增强功能。模块化管理允许将store拆分为包含各自state、mutations、actions和getters的独立模块。插件则能监听状态变化,实现诸如日志记录或数据持久化等功能。本文通过具体示例介绍了如何在Vuex中实现模块化管理和插件的高级应用。
37 1
|
2月前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
24天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
247 58
|
7天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9 2
|
4天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
12 1
|
7天前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
16天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
下一篇
无影云桌面