tnblog
首页
登录

vue脚手架搭建

316人阅读 2019/10/21 23:46 总访问:1504 评论:2 手机 收藏
分类: vue

前言:最近找了一个vue的项目打算自己开发做着玩,由于之前是没有接触过脚手架,老是看到这个名词,百思不得其解,今晚自己搭建了一下

一、什么是脚手架?

听到这个词首先想到的肯定就是工地上的那种由钢管等搭建架子,此脚手架与彼脚手架确实有一定的联系,目的是为了方便更好工作,方便我们开发。

二、搭建之前的准备

同理,工地上需要建筑器材,平台,我们这个也是同样需要的。官网安装nodejs,版本建议最新的,个人习惯,买新不买旧,神马都喜欢尝试新的。至于如何安装网上教程一堆,我这里就不多说了。

三、动手搭建

安装完成之后win+R,cmd打开。

输入node -v查看版本,安装的时候一路默认就好了,如果查看版本号错误又懒得解决的话,那就卸载重装吧,没记错的话我第一次安装是安装到D盘,所以会涉及到一个全局,忘了当初是如何解决的,卸载再来一遍就好了

输入npm install -g webpack:-g是全局的意思,这里全局安装webpack,只需安装一次就好了,由于我之前安装了,这里就不截图了。

输入npm install -g vue-cli:全局安装vue脚手架,同上

进入你需要创建项目的目录,我这里是进入G盘,输入vue init webpack "项目名"

稍微等待一下就好了,接下来会有配置属性

这个意思的项目的名字vue-webchat,回车

项目描述,回车

作者,不用不说了吧,回车

Vue builb为webpack的配置文件,回车

是否安装路由:Y

eslint校验js代码,装不装都不想影响,插件后期也可以装

设置单元测试,至于有什么用不清楚,我们选择:n

vueE2E测试,同上

默认npm安装,回车。接下就是等待

好了就是这个样子

接下来我们进入到项目所在的文件夹

输入npm install安装项目所需要的依赖包

最后输入npm run dev会看到这个,后面的就是地址了

把地址复制到浏览器

四、目录分析这样就算成功了,接下来我们用vscode打开项目

项目的目录就是这个样子了,我们稍微分析一下这个目录,首先看到下面的index.html这个我们不需要管,我们主要的操作在src里面,assets放的是css等文件,main.js是程序的入口,router是路由,components是放公共组件的地方,至于其他的就就靠你们自己去熟悉了。vue项目里面最难的就是路由和组件,还有vuex。

万事开头难,只要敢于尝试,多尝试,总会又收获的。

哦!突然想起我是个后端开发人员,最近跑去钻研前端,我太难了






评价
世上本无事,庸人自扰之
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET