在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如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 ,看到命令描述:

我们init命令安装 
vue init webpack test

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

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

启动成功!


4.项目文件描述

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

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

行数 描述
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

从零开始搭建一个vue.js的脚手架的更多相关文章

  1. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  2. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

  3. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  4. 完整搭建一个vue项目

    目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...

  5. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  6. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

  7. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  8. 创建Vue.js对象:我的第一个Vue.js输出信息

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...

  9. 第一个Vue.js案例

    第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...

随机推荐

  1. HDU 4283 You Are the One 【区间DP】

    <题目链接> 题目大意: 有$n$个人排成一排要上台表演,每个人有一个屌丝值$pi$.第i个上台表演的人,他的不满意度为$(i-1)*p_i$.现在有一个类似于栈的黑屋子,你可以让某些人进 ...

  2. MyBatis3系列__01HelloWorld

    # MyBatis作为一个ORM框架,其重要程度不用过多介绍.下面开始一起学习吧:本博客的编程方法与MyBatis官方文档基本一致:## 1.创建一个数据库mybatis_learn以及对应的表tbl ...

  3. 201771010118《面向对象程序设计(java)》第四周学习总结

    1.实验目的与要求 (1) 理解用户自定义类的定义: (2) 掌握对象的声明: (3) 学会使用构造函数初始化对象: (4) 使用类属性与方法的使用掌握使用: (5) 掌握package和import ...

  4. HTML5_提供的 新功能_less 编译_

    HTML5_提供的 新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 <div id="ele" class="... ...

  5. (76)Wangdao.com第十四天_JavaScript 正则表达式对象 RegExp

    RegExp Regular Expression,正则表达式是一种表达    文本模式(字符串结构)  的式子. 常常用来按照“给定模式”匹配文本.比如,正则表达式给出一个 Email 地址的模式, ...

  6. [LeetCode] Robot Room Cleaner 扫地机器人

    Given a robot cleaner in a room modeled as a grid. Each cell in the grid can be empty or blocked. Th ...

  7. cadence单一原理图库的设计

  8. DEV中右键菜单如何只在非空单元格上显示?

    问题: 1. 开发时,我的winform程序中有很多gridview,我希望右键菜单只在我点击非空的行时才显示,点击其他空白区域时不显示: 2. 有一个树状导航图,treelist 中的节点都有右键菜 ...

  9. lcr电桥浅谈

    此图告知,现代的lcr电桥使用的都是虚地,阻抗很高. 系统采用的鉴相器比较简单,是检半个正弦基波(RMS有效值积分),可以有效抵御偶次基波. 倒不如直接使用运放电容移相,比较采样法直接采样最高点. 此 ...

  10. [dev] Go的协程切换问题

    子标题:runtime.Gosched() 是干嘛用的? 1. go程序都有一个环境变量,做线程数设置 GOMAXPROCS 2. 当协程数小于等于线程数的时候,程序行为上与多线程没有区别. 3. 当 ...