在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如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. Microsoft Office Word 中的公式自动编号

    先插入公式,#,插入题注(交叉引用),生成了标号.此时整个公式是题注样式.在公式和标号之间插入一个样式分隔符. ____________________________________________ ...

  2. 监听F5刷新,添加路由前缀

    为了解决ninx反向代理,添加路由,但最终react的route还是不认识,研究了半天做个记录: document.addEventListener("keydown",funct ...

  3. FLASK 的Session和MoudelForm插件

    falsk是小而精的框架,但是热度高, 所有很多爱好者提供了很多扩展插件 功能强大,美而不足的就是兼容稳定性有时候不太好,不过大部分还是很可以的 Flask-Session flask内置sessio ...

  4. JAVA基础复习与总结<一> 对象与类的概念_内部类_继承与多态

    一.对象与类 类:类是一个模版,它描述了一类对象的行为和状态. class animal { private int color; private int size; public void eat ...

  5. 在Linux下用gcc编译hello world

    1. 确保Linux系统里已经装好了gcc 测试:输入gcc后是如下的结果就说明已经安装成功 2. 创建HelloWorld.c 使用 touch 创建一个空文件; 用vim编辑 按下A或者I 插入 ...

  6. 【IT小常识】如何将IE手动升级或降级

    我们从浏览器任意下载一个我们需要安装的IE版本.可能部分电脑的IE版本不是微软正版的IE版本,所以无法通过更新来获取我们想要的IE版本. 下面,详细的讲一下如何如何手动升级IE或者吧IE降级. 一. ...

  7. TypeScript系列 - 什么是TypeScript

    看了很多关于TypeScript的文章,总体说来没有很好的,一个系统的学习TypeScript的资源. 接下来,我将给大家带来TypeScript的系列,让你和我一样,一步一步的学习TypeScrip ...

  8. python +ps 三方面库整理

    -------------------------------------------端口进程相关------------------------------------------------cp ...

  9. vue发送请求---fetch-jsonp

    fetch-jsonp和axios类似,都是第三方插件返送请求,而vue-resource是vue官方提供的请求插件 前两个哪个组件使用就在那里引入,vue-resource直接在vue的main.j ...

  10. ApiUser

    using System; using System.Runtime.InteropServices; using System.Text; using HANDLE = System.IntPtr; ...