五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看)

简介: 五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看)

一、搭建vue环境

安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定。

点我进入node官网

安装好后cmd输入node -v查询是否安装成功,如下出现版本号即为成功。

二、Vue脚手架工具

全局安装vue-cli,命令行中输入:

npm install --g vue-cli

国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝镜像或者yarn

淘宝镜像的安装如下

npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装成功后 使用 cnpm i xxx 代替 npm install xxx

三、创建项目

vue create 项目名
vue create  code    //其中code为你的项目目录名称   (enter键确认,并进入下一步)

最开始回车会出现下面两项

Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)
  Manually select features(手动选择项目特性)

我们可以通过上下键,空格来选择我们需要的,一般我们都会选择手动配置

四、选择manually select (enter键确认,并进入下一步)

对于每一项的功能,王同学做一个简单的描述:

  • Babel 主要是对es6语法转换成兼容的js (选上)
  • TypeScript 支持使用TypeScript语法来编写代码
  • Progressive Web App (PWA) Support [把网页做的更像原生app]
  • Router 支持vue路由配置插件(一般都会选择)
  • Vuex 支持vue程序状态管理模式 (一般都会选择)
  • CSS Pre-processors 支持css预处理器 (一般都会选择)
  • Linter / Formatter 支持代码风格检查和格式化 (选上)
  • Unit Testing 单元测试
  • E2E Testing E2E测试

常见的项目选择如下

五、选择完成之后回车 这里我们选择3.x的

六、完成之后回车 出现以下界面

这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我门选择 n

七、回车 出现以下界面

这里的意思是问你选择哪一种CSS预处理语言,我的项目中一般使用的是SCSS我选择第一个

八、回车出现以下界面

这里的意思是选择一种格式化代码方式:我一般选择 ESLint + Prettier

九、回车出现以下界面

这里的意思是问你什么时候进行代码规则检测,我一般会选择保存就检测,也就是Lint on Save

十、回车出现以下界面

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个

十一、回车出现以下界面

这里是问你是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了,完成后如下图:

十二、根据提示,启动项目

根据指令提示 我们先执行cd code,然后执行npm run serve

十三、当我们需要自定义webpack相关配置的时候需要在项目根目录中创建vue.config.js文件,它会被@vue/cli-server自动加载,相关配置内容官网将的很详细,大家可以自己去官网看

好了,今天的内容就到这里了,本期结束 我们下期见!!!

Vue脚手架的基本用法

方法一:基于交互式命令行的方式,创建vue项目

详细步骤请参考上文

方法二:基于图形化的方式创建新版的vue

第一步:Windows+R打开面板—输入cmd命令—回车

第二步:输入命令 vue ui

方法三:基于2.X的旧版本,创建旧版的vue项目


相关文章
|
1月前
|
JavaScript 开发者 UED
Vue入门到关门之第三方框架elementui
ElementUI是一个基于Vue.js的组件库,包含丰富的UI组件如按钮、表格,强调易用性、响应式设计和可自定义主题。适用于快速构建现代化Web应用。官网:[Element.eleme.cn](https://element.eleme.cn/#/zh-CN)。安装使用时,需在项目中导入ElementUI和其样式文件。
22 0
|
1月前
|
存储 JavaScript 前端开发
从入门到项目实战 - Vue 列表渲染
从入门到项目实战 - Vue 列表渲染
64 0
|
1月前
|
JavaScript 前端开发 程序员
vue入门
vue入门
26 0
|
3天前
|
JavaScript 前端开发 API
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
|
3天前
|
JavaScript
vue路由从入门到进阶 --- 路由重定向与404等问题
vue路由从入门到进阶 --- 路由重定向与404等问题
|
4天前
|
JavaScript 前端开发
Vue入门01
Vue入门01
7 0
|
28天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
1月前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
29 1
|
1月前
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
|
1月前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!