创建vue项目

87 阅读3分钟

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战

趁这次更文挑战,我想要对前端的一些基础知识有一个学习并做一个记录与大家一起学习

1.介绍

Vue.js,一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,便于与第三方库或既有项目整合(来自官方文档)

2.安装

要想使用vue,首先要将环境搭建好,才能开始接下来的工作,今天来分享一下如何搭建vue/cli脚手架

2.1 安装node

直接去官网下载它的稳定版本即可,安装成功后可以cmd进入控制台输入node -v看是否有版本有则安装成功

2.2 安装vue,vue/cli用npm安装

官网推荐:在用 Vue 构建大型应用时推荐使用 npm 安装,npm 能很好地和诸如 webpack或 Rollup模块打包器配合使用。 全局安装vue-cli

npm install -g @vue/cli

但是这样的速度会有些慢,我们可以尝试用淘宝镜像进行安装会很快

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli

image.png 到这里环境算搭建好了,我们也直接在命令行创建一个项目

2.3 创建项目
  • 1 先选择你需要在哪一个目录下创建项目,进入需要创建项目的目录下再输入命令
vue create studyvue

image.png

  • 2 在创建项目名称后输入回车会让你选择一些配置,可以选用默认也可以手动 我这里是选择手动

image.png

  • 3 选择你项目需要的功能 其中:

(1)Babel 转码器 将ES6转为ES5

(2)TypeScript 是javaScript的超集,在编译期会去掉类型和特有语法,生成纯粹的JavaScript

(3)Router vue路由

(4)Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

(5)CSS Pre-processors CSS 预处理器(如:less,sass)

(6)Linter/ Formatter 代码风格检查和格式化

(7) Unit Testing 单元测试

选择你在创建项目时需要的功能 2952d126e472eb1eaa8b46902f4f136.png

  • 4选择版本 我选择的时3.x dba0ce382f839d9564dd3945ede3b6e.png
  • 5 选择路由的模式,我选择的历史模式(对于两种模式的比较随着后面的学习会继续分享) 504acd146b08eed01ed5ffcc0f0b74d.png
  • 6 选择css预处理器 我选择的是sass中的with node-sass 其中node-sass是自动编译实时的,dart-sass需要保存后才会生效 88760b68d39d0bdb4c5959bfd997d9d.png
  • 7 选择代码风格检查和格式化 我选择标准 a4bafe4e19d6081412da46b42965b36.png
  • 8 把配置文件放在一个独立的配置文件中还是放到package.json中 image.png
  • 9 将此保存为将来项目的预设(依自己情况而定) image.png 最后是我创建手动创建这个项目的一些功能设置 image.png

创建完项目后,启动项目 image.png 再访问项目

168ff150f25fd4135ec575645c646d9.png 这样一个项目就创建成功了