vue3.0 studay(一) 汇总

一、vue3.0 学习

vue3+typescript创建项目详细步骤如下:

1、新建一个文件夹;

2、vue/cli全局安装:cnpm install -g @vue/cli 或者 npm install -g @vue/cli;

(如果之前是vue/cli 老版本的先卸载了,npm uninstall -g vue-cli   //卸载
 
npm install -g @vue/cli   //安装最新的cli版本)

3、创建项目名称:vue create 项目名称;

4、配置文件(根据个人喜好选择):

 创建vue3的项目:

vue create vue3-test

1)、第一个选项是预设配置项,第一个只包含babel,eslint,要选第二个,可以自由配置。 

 vue3.0 studay(一) 汇总_第1张图片

 箭头下选:  Manually select features
vue3.0 studay(一) 汇总_第2张图片

然后按一次回车键:

vue3.0 studay(一) 汇总_第3张图片

 看看这几个都有没有被选中,如果没有箭头下选敲键盘空格键(空格搭配上下键选择)。就能看到里面带 * 代表选中
vue3.0 studay(一) 汇总_第4张图片

babel是用来适配一些js的新特性,浏览器还不支持的,但是可以通过其它方式实现它的语法

typescript就是启用typescript支持

PWA这个是渐进式web应用,如果用不上,不需要选

Router是vue-router

css pre-processors是用来支持css预处理器的,less,sass这些

linter是用来做代码检验的,如代码缩进,规范合不合格之类的,都是它来校验

2)、这2个是自动化测试框架,可以不选;测试代码有没有bug,符不符合预期用的

然后回车,选择3.x

vue3.0 studay(一) 汇总_第5张图片

 3)、class-style component syntax,像react的风格,是否启用类作为组件模型,这个建议开启。 输入:y

vue3.0 studay(一) 汇总_第6张图片

4)、配置babel对ts,jsx的转义,要开启 输入: y

vue3.0 studay(一) 汇总_第7张图片

5)、路由管理模式,Y是HTML5 history,N是hash模式,(自己选择),喜欢地址栏带 # 就输入:y,否则输入: n

vue3.0 studay(一) 汇总_第8张图片

 6)、预处理器,根据自己习惯选择; 我个人选择第2个

vue3.0 studay(一) 汇总_第9张图片

 7)、这个是代码风格约束的选择项; 我选默认的

vue3.0 studay(一) 汇总_第10张图片

 8)、对git提交时候的风格校验;第一个是保存的时候,第二个是commit的时候推荐2个都开启,用git 就选第2个。

vue3.0 studay(一) 汇总_第11张图片

 9)、置配置文件的管理路径,建议选第一个,每一个单独生成配置文件,第二个都会堆在package.json,

vue3.0 studay(一) 汇总_第12张图片

 10)、把这些配置是否保存为模板,选择N

vue3.0 studay(一) 汇总_第13张图片

 开始创建项目:等一会就成功了。

vue3.0 studay(一) 汇总_第14张图片

 vue3.0 studay(一) 汇总_第15张图片

 11)、成功创建项目;  cd vue3-test   
然后启动项目:npm run serve

vue3.0 studay(一) 汇总_第16张图片

你可能感兴趣的:(vue3.0,vue.js)