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

node 12.18.3
vue	3.0
vue-cli 4.5.0
typescript 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

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) 报了一个类型错误。

2. index.html 中也有一个报错，提示ESLint: clear(vue/comment-directive)

其实上面这两个问题真的不是什么致命的bug，也不会影响程序运行，但是我还是想把他们消除掉（强迫症，没办法），经过查证，这两个其实都是eslint检查引起的，一个mian.ts中的错误，是说我们App.vue这个组件和createApp函数的接受参数类型不匹配，createApp接受的是vue的Component类型的参数，App.vue中没有<script>代码片段，也没有定义组件的名字，这样idea在做eslint检查的时候，识别不了。加上<script>就可以了。

另一个index.html错误，这个看起来很奇怪，这就是个根页面啊，里面只是一堆html的标签而已，

es提示clear（vue/comment-directive）干啥。

经过验证，我把eslint检查中的一项去掉，就能把错误消除了，就是下面这个：

这样项目就清爽了。

这个前端的项目才刚刚开始，后面会继续研究其中的门道，感兴趣的朋友请多关注哦。