文章目录

  • 前言
  • 一、准备工作
  • 二、使用Vue CLI构建项目
  • 总结



前言

最近无聊,再加上发现自己的技术栈已经严重落后,所以就想着补一补。

正好平时也有在写小说,市面上的码字助手都用的不顺手,于是打算自己做一个码字助手,顺便复习一些各种知识。

一、准备工作

在开发之前,确保自己电脑有以下工具:

  1. git(用于提交自己的代码,不需要可以忽略)
  2. node10及以上版本(LTS版,我用的是14.3.0)
  3. typescript(暂时没想好怎么用,反正也要学习就一起安了)

typescript使用全局安装,安装方式如下

npm install -g typescript

二、使用Vue CLI构建项目

在控制台输入下面的命令,writing-assistant为我为项目起的名字

vue create writing-assistant

之后就是各种选项

vue2局部使用typescript vue3 typescript_vue2局部使用typescript


firstsecondthird是以前创建vue项目时留下的默认配置

下面两个Default是默认配置,使用vue2或者vue3

最后一个是自定义配置,我们这里选择自定义

vue2局部使用typescript vue3 typescript_vue.js_02


可以看到选择了Manually select features后出现了上图中一系列配置【回车】确定,【↑】【↓】移动,【空格键】可以用于多选,【a】是全选,【i】是取消选择

vue2局部使用typescript vue3 typescript_vue.js_03


这里版本选择3.x

vue2局部使用typescript vue3 typescript_vue_04


这里选择代码风格检查和格式化,我选择了ESLint + Standard config 不过后来看网上说ESLint + Prettier的规范比较好,这里可以按需选择

两者的区别可以看这篇博文

vue2局部使用typescript vue3 typescript_vue_05


下一步选择语法校验方式,这里选择保存时校验,而不是fix和commit时校验

vue2局部使用typescript vue3 typescript_vue2局部使用typescript_06


选择配置文件的保存方式,例如babel、eslint等

选择【按文件单独配置】或者【package.json统一配置】

我选择【按文件单独配置】

vue2局部使用typescript vue3 typescript_html5_07


都选完后会提示【是否保存此次设置?】,我选择的【是】

vue2局部使用typescript vue3 typescript_es6_08


给这次的预设起个名字,这里随意起了

之后在控制台输入

npm run serve

vue2局部使用typescript vue3 typescript_vue_09


可以看到服务起来了

总结

这样我们就把一个Vue3.x的项目创建好了。
因为我是要做一个写作软件,下一篇就写一下如何用electron,将这个项目变成exe文件