webstorm怎么跑项目_vue3尝鲜-venus商城项目前端

本文中涉及到的组件的版本如下:

node 12.18.3vue3.0vue-cli 4.5.0typescript 4.1.2

venus是一个商城项目,主要用于将自己平时所积攒的一点点技能融汇在一起,也作为新技术的试验田,供平日练手。


之前在工作当中也有使用过vue,作为一个后端开发者,最开始接触vue的时候有很多不适应,后来经过一段时间的苦修才算初步掌握了vue前端项目的开发技能。有句话叫‘学的越多,不知道的越多’,了解的越多越觉得前端博大精深,vue完全颠覆了我以前对前端的认识,以前(五六年前)做前端,只是html+css+jquery搞一搞就可以了,最多用下流行的样式库bootstrap,其他的东西好像就没了,之后听说了AngularJS、React到最近的vue,使用了vue之后,明显感觉前端变得工程化了,复杂度越来越高,能做的也越来越多,而且大有可为。

说回vue3,2020年9月,正式版终于出来了,最近研究了一下,说两点最强烈的感受:

  1. 针对vue2使用过程中的痛点做了重大改进,代码组织更加有序,组件复用更加容易。
  2. vue3全面拥抱了typescript,本身使用ts开发。

学完大致的内容后,就忍不住要尝试一下了,这篇文章先把基本的架子搭起来,之后再慢慢的细说其中的门道。

创建项目的步骤

创建项目之前需要先通过npm安装vue的脚手架工具vue-cli

npm install -g @vue/cli

之后就可以使用vue-cli的命令创建vue3的项目了,命令也很简单

vue create venus-h5

前端的朋友应该比较清楚,接下来vue-cli会引导你做一些项目的基本设置,像下面的图中这样

end.png

130f890144f5df412f2c0b5ddb797c94.png
please pick a preset:Manually select features

这一步直接就会提供一个vue2和一个vue3的项目模版设置,如果选择其中一个,vue-cli直接就会按照默认配置初始化项目去了,但是我是想了解清楚每一步内容的,所以我选择手动。

Check the features needed for your project: 输入a全选
Choose a version of Vue.js that you want to start the project with: 3.x(Preview)

vue的版本当然选择vue3了

use class-style component syntax? Yes

是否使用类风格的组件语法,既然项目要用到ts,之后少不了要面向对象了,类风格这里选上。

Use Babel alongside TypeScript?

是不是要Babel和TS一起使用,babel是做语法转换的,我也选择了解一下。

Use history mode for router? Yes

路由中是否要使用history模式,这个会让你的浏览器地址栏看上去和正常的页面一样,没有#号区分。这里就用它了, 另一种带#号的是hash模式。 使用history模式的时候需要在nginx中配置的时候注意,如果路由匹配不到,则返回index.html。另外一点,路由要把匹配静态资源的配置单独放在前面,就是如果访问静态资源的时候如果匹配不到的话,不能像上面那样返回index.html,要返回404,否则你的项目在被访问的时候,前端有可能缓存到错误的内容,导致页面打不开。

Pick a CSS pre-processor? Sass/SCSS (with dart-sass)

选择一个css预处理器,使用最广泛的三个都列出来了,sass、less、stylus,相对来说sass使用的更多些,但是选择sass的实现时不要选择node-sass,这个东西安装容易出错,特别是在一个受限的环境下(公司在内网环境开发),安装起来会有各种莫名奇妙的错误,这里选择dart-sass,官方推荐的一种实现,会不会有坑就后面再看了。

下面的选项就不是那么重要了,看心情选就可以。

项目中的问题

按说新创建的项目,而且还是脚手架创建的,应该很完美才对,怎么还会有问题呢?但是项目使用webstorm打开以后,还真就报错了。

  1. main.ts 中 createApp(App) 报了一个类型错误。
973b2752217f0939f363c1bd404719e1.png
  1. index.html 中也有一个报错,提示ESLint: clear(vue/comment-directive)
bb1a690113f4c9f0fb3dd6f503e9ca81.png

其实上面这两个问题真的不是什么致命的bug,也不会影响程序运行,但是我还是想把他们消除掉(强迫症,没办法),经过查证,这两个其实都是eslint检查引起的,一个mian.ts中的错误,是说我们App.vue这个组件和createApp函数的接受参数类型不匹配,createApp接受的是vue的Component类型的参数,App.vue中没有

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值