Vue 创建项目

这里分为Vue2和Vue3

创建Vue项目需要Node JS的环境,但是因为我已经下过了,所以就不打算进行过多的下载说明,需要Node JS,然后会自带npm,然后下载 Vuecli 和 webpack。
npm install vuecli -g
都需要下载Node JS,和Vuecli Vue的脚手架
Vue2和3都是在cmd里面使用,然后你在哪个目录下创建就会在哪个目录出现项目

Vue2

vue init webpack 项目名称
项目名称和目录都最好不要带中文,项目名称好像不能使用大写

因为现在版本已经升到了使用Vue3了,所以创建方式变成了,

Vue3

vue create 项目名称

or

vue ui

ui是使用图形化界面进行创建。

这里我们使用命令行界面创建Vue项目

第一个是选择预设,就是指创建一个项目需要带什么

Vue 创建项目

第一个是我自己的,
第二个是默认使用Vue2,babel和eslint,
第四个 Manually select features 是自己选择

我们选择第四个,方向键和回车即可

Vue 创建项目

右边有说明操作方式,
然后我们分别解释以下这个是什么

  • Choose Vue version
    • 选择 Vue 版本
  • Babel
    • 是将js从es6编译为以前的浏览器能够支持的一个编译插件,原理后续再说
  • TypeScript
    • 在JavaScript的基础之上的编程语言,可以学习,主要不同点在于数据要带有 明确的类型。
  • Progressive Web App (PWA) Support
    • 渐进式Web应用(PWA)支持(直译过来的。。)
    • 就是一种类app,(类app交互,消息推送和离线缓存)
  • Router
    • 前端路由
  • Vuex
    • 状态管理库,常用于多个组件共享状态
  • CSS Pre-processors
    • css预处理,sass,可以写sass语法,在style中写 lang="scss" 就是sass语法
    • <style lang="scss">
  • Linter / Formatter
    • 就是 eslint,一个编写规范,如果不满足规范将无法编译成功。
  • Unit Testing
    • 单元测试,站在程序员的角度测试
  • E2E Testing
    • 端到端测试,站在用户角度的测试

选择完成后。

题外话

router 会让你选择history和hash两种,history在url上不会出现#,而hash会,
一般的小项目不用在意,但是有时可能会需要后台配置的支持

如果选择Vue版本,就会让你自己选择Vue的版本

然后就会询问你,喜欢将一些配置文件信息放在哪个文件

Vue 创建项目

这两个的区别应该是,一个会将配置保存到package.json文件中
另一个是将其放入独立文件中,

选择之后就会问你是否保存这次预设的方案

Vue 创建项目

然后就静待完成就好

完成后,使用
npm run serve
即可运行

在控制台使用
Ctrl + C
停止

Vue 创建项目

Vue 创建项目

上一篇:Vue


下一篇:Vue2 全局注入 过滤器、自定义指令