指南真简单教程 —— Vue项目及开发环境快速搭建

本文不涉及内容

Vue CLI是什么?

Webpack如何配置?

Node.js基础

ES6语法

搭建环境

Windows10 / VSCode / Vue CLI 4.x / NodeJS 14.x

准备工作

1. 安装NodeJS 

    https://nodejs.org/

2. cmd指令,更新npm源(可选)

    npm config set registry https://registry.npm.taobao.org --global

    npm config set disturl https://npm.taobao.org/dist --global

3. cmd指令,安装vue cli (https://cli.vuejs.org/zh/guide/installation.html)

npm install -g @vue/cli

4. cmd指令,安装eslint

npm install eslint --global

创建项目

你可以选择UI或者CLI方式来创建项目

CLI

定位到准备创建项目的目录,并在cmd中输入

vue create 项目名

选择vue版本

之后根据提示直到创建完成。

UI

在cmd中输入

vue ui

即可打开项目管理界面


项目管理

相比CLI方式,UI界面可以更容易的进行额外配置,比如插件


插件管理页

此时,一个空项目已经建成。在默认配置的情况下,你的目录应该是这样


初始化目录结构

下面开始项目搭建的最后一步,也是开发前的第一步

配置开发环境

首先用VSCode打开项目folder


初次打开项目

em...惨白+提示,.vue文件无法解析,我们缺少基础插件。根据提示,安装Vetur


Vetur

切回刚才的.vue文件,我们可以看到语法高亮已经正常显示


高亮显示但格式编码混乱

代码中至少存在引号不统一,分号不统一,括号不统一以及vue模板格式不推荐等问题,作为开发基础的编码标准一定要有高效便捷的方式达成 —— ESLint

在插件市场中搜索eslint,第一个标星推荐的就是

安装eslint

切回刚才的.vue文件,可以看到eslint已经生效


eslint默认规则

但默认规则对于统一编码样式几乎是无用的,我们需要更具体的规则。定制规则可以通过vue-ui或者eslint CLI或者手动方式在项目根目录增加 .eslintrc 文件,比如使用google标准


eslint init

根据项目应用的lint级别初始化eslint,然后会得到一个eslint文件

.eslintrc文件

如果使用google代码lint,你需要额外安装一些npm依赖包,包括


package.json

可直接修改package.json文件,在依赖中加入缺少的包,然后npm install安装。

注意,默认的eslint版本较低,无法实现es2021的环境检查。

安装完成后,重启VSCode就可以看到之前的代码满目疮痍


严格检测下的问题显示

可以点击Quick Fix中的自动修复来解决大部分的问题


自动修复

但更高效的操作方式是当你Ctrl+S时,自动修复。可以通过修改VSCode中的配置来实现该特性。

选择【设置】->【插件】->【eslint】编辑settings.json

settings1
settings2

在文件中加入以下代码即可


保存时修复eslint问题

以及 "editor.formatOnSave": true,

现在你可以写出漂亮且符合规范推荐的代码了,下一步我们来看看代码管理的问题——git。

VSCode自带git管理工具,而且足够强大

集成git环境

VSCode默认使用全局git账号进行操作,如果你有超过1个git账号需要切换使用时,你需要一些额外设置。这里我使用了 “Git Config User Profiles” 插件


git账号管理插件

该工具可以为不同的项目设置不同的git账户

多git账户选择

至此,开发前准备工作告一段落,启动服务即可看到默认页面

启动服务
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容