上手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 前端构建

引用地址:

发表评论:

Powered by emlog 去你妹的备案 sitemap