Vue 创建项目

时间:2021-10-03
本文章向大家介绍Vue 创建项目,主要包括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项目

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

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

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

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

  • 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的版本

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

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

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

然后就静待完成就好

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

在控制台使用
Ctrl + C
停止

本文来自博客园,作者:tallgy,转载请注明原文链接:https://www.cnblogs.com/tallgy/p/15364152.html

原文地址:https://www.cnblogs.com/tallgy/p/15364152.html