上手VUE前端构建

作者：V君 发布于：2018-8-25 21:46 Saturday 分类：折腾手记

TL；DR

1）到官方网站，下载稳定版本的node安装，选择加到环境变量，然后配置淘宝NPM镜像。

2）参考官方网站安装vue-cli。

3）使用vue-cli创建项目，然后在VsCode编辑代码。

 

之前的项目虽然已经用上了VUE，但并没有把前后端分离出来。

经过反复重构，项目已经前后端分离了，但我一直在搞后端，把前端整个交给猫同事负责。

现在觉得是时候也搞搞前端了，在听了猫同事建议之后，从vue-cli和VsCode开始上手。


（其实是想给VCommon做个案例来者的，搞一个个人博客代替现在使用的EMLOG

（另外再吐槽一下EMLOG在Chrome上面编辑文章时Ctrl-Z会有很大几率丢内容

（再者也没有修订历史，不知道新版或插件有没有，已经很久没动服务环境，要搞还不如上WP

（再另外，发现Markdown这玩意儿也不错，比起富文本更轻量级，跃跃欲试了都


稍不注意扯了这么多，回归主题：一个完整的项目是不能缺少前端的，不懂就去学！

目前我的对前端构建的了解几乎为零，只知道几个常用套路的名称，甚至不能正确拼写。


让我们开始吧。


首先从vue-cli官方网站开始，将语言切换到中文，进入起步栏目。

看完了介绍之后转到安装步骤，vue-cli是基于node.js的，使用之前我们得先安装它。

（其实常见的前端构建似乎都基于node.js）

顺着指引，我们转到node官方网站，下载稳定版本安装。

现在的vue-cli版本是3.x，需要node 8.9以上的版本，这次就下载官网首页上的8.11LTS。

为了方便今后使用，安装时要把node和包路径加到环境变量，可以在安装向导选择。


在node安装完之后，安装vue-cli之前，得稍稍调整一下node。

由于我们这神奇的国度的网络环境，安装软件包可能会很慢或遇到问题。

就连VUE官方教程都这么建议了。让我们转到淘宝NPM镜像然后按照上面提到的步骤操作。

开启一个命令行窗口，贴上下面这行命令然后回车

 npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就把node配置好啦。


让我们回到vue-cli安装步骤，在命令行窗口贴上下面这行命令然后回车

 cnpm install -g @vue/cli

经过调整的node安装速度很快，一下子就提示全部安装完成。

接下来可以进入HelloWorld环节了吗？


找个地方新建文件夹，并将命令行转到这里，然后按照教程执行下面这行命令

 vue create hello-world

按照提示选择默认还有选择镜像源进行快速安装。

经过短暂的刷屏之后，出现了成功的提示，然而为啥命令行窗口不响应了呢？

不管它，另开一个命令行执行它。按照提示接下来应该进入hello-world文件夹执行

 npm run serve

又是一阵刷屏，然后服务就启动了，开始监听8080端口，让我们打开浏览器看看。

以VUE的LOGO为主体的示例页面就呈现在浏览器中呈现出来了。


接下来我们看看hello-world文件夹里面都有哪些文件被创建出来。

进入src文件夹就看到熟悉的单文件组件了。


接下来我们该试着去编辑源代码进一步学习，为了更方便地编辑源代码，我们需要VsCode。

那就去弄一个喽，咕狗VsCode，找到官网点击下载链接。

运行下载好的安装文件，将文件夹右键菜单选中，其他一路默认走到底。

第一次启动会提示安装中文语言包，点击安装并重新启动。

哇！好快，窗口消失之后立即出现，然后就可以继续操作，和VS2017比起来真是天壤之别。

接下来我们要针对VUE安装Vetur插件，到这里，开发环境就基本上配置好啦。


让我们在hello-world文件夹打开code。

展开左边第一个按钮的的文件树，进入src，然后打开任意vue文件就能看到熟悉的VUE代码了。

目前对VsCode的了解并不多，甚至还不知道如何启动项目。

刚才我们是使用命令行窗口启动的，总不能每次都单独打开命令行来启动吧。

VsCode也是轻量级的IDE呢，在菜单找了下，发现查看里面有个终端，

可以用快捷键呼出底部的命令行窗格，那我们就在里面敲

 npm run serve

来启动项目，启动之后还提示了如何构建发布版本

 npm run build

跑完之后就可以在项目文件夹里面找到dist，熟悉的web包就这样生成出来了。


嗯嗯，新手到此一游。

标签: 软件开发 Web技术 VUE 前端工程

« 在 vue-cli 3.x 创建的项目中启用反向代理 | 使用Windbg+sos+sosex从内存转储详细分析对象引用,排查.NET服务应用内存暴增»

引用地址:

发表评论：

Powered by emlog 去你妹的备案 sitemap