从零开始搭建一个vue.js的脚手架

在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者)

vue.js是现在一个很火的前端框架,官网描述其简单易用,灵活度高,性能好。本篇文章基于Windows系统


公司的项目前端框架选择了vue,最近也一直在学习它,今天写一篇Vue-cli脚手架搭建的学习记录,以后忘记了再来查阅。那么如何从零开始要跑起一个vue.js项目?主要分以下几步:

1.Node.js(Javascript运行环境)安装 
2.Vue.js安装 
3.脚手架搭建 
4.项目文件描述


1.Node.js安装

  • 下载安装
  • 测试

下载安装

点击下载: Node下载 根据自己电脑系统安装,一直点下一步即可

测试

Windows+R快捷键打开cmd窗口,输入node -v出现版本号,即安装成功!


2.Vue.js安装

使用NPM安装

—NPM: NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

由于 NPM 安装速度慢(服务器在国外),这里使用淘宝的镜像及其命令 cnpm 
安装淘宝的镜像: 
打开cmd命令框,输入 
npm install -g cnpm –registry=https://registry.npm.taobao.org 
在命令框输入 
cnpm install vue 
好了,vue.js安装完毕


3.脚手架搭建

  • Vue-cli安装
  • 搭建测试

Vue-cli安装 
在cmd命令框输入 
cnpm install -g vue-cli

搭建测试 
1.在你的vue安装目录下(我的是C:\Users\dell)新建文件夹VueTest 
2.打开cmd命令窗口输入cd VueTest,进入C:\Users\dell\VueTest,输入vue list可以看到列出了可以使用的模板 
从零开始搭建一个vue.js的脚手架

在命令框内键入 vue ,看到命令描述:

从零开始搭建一个vue.js的脚手架

我们init命令安装 
vue init webpack test

从零开始搭建一个vue.js的脚手架

安装选项选择自己需要的即可,其中ESLint为ES6的代码风格检查器, 
这时看到安装完模板后给出了用法(绿框内),并且路径C:\Users\dell\VueTest多了一个test文件

从零开始搭建一个vue.js的脚手架

进入test文件夹 
cd test 
安装依赖 
cnpm install 
启动 
npm run dev

从零开始搭建一个vue.js的脚手架

启动成功!


4.项目文件描述

打开项目文件夹,可以发现比之前多出来一个node_modules,点开发现是之前安装的依赖文件,那么其他文件夹都代表着什么?存放着什么呢?

从零开始搭建一个vue.js的脚手架

这里,我们用一个表格做简单描述:

行数 描述
1、2 webpack配置相关,比如在config中的index.js可以配置端口号,这里不做详细描述
3 安装的依赖代码库
4 项目中所有的源码在这里
5 第三方静态资源
6 通过这个文件将ES6编译成ES5的(有些浏览器不支持ES6)
7 编辑器的相关配置
8 忽略ES语法检查的目录文件
9 eslintrc相关配置,比如debug配置
10 git提交时忽略的文件目录
11 关于CSS转换的文件
12 项目入口文件
13 项目依赖文件、配置文件
14 项目描述文件

至此,我们已经踏进了vue的大门!

(转)https://blog.csdn.net/qq_32347235/article/details/58134723

上一篇:注意力机制阅读(硕博文章)


下一篇:修改源代码或者配置文件改变SSH服务的缺省banner