从零开始搭建一个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 ,看到命令描述:
我们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的脚手架的更多相关文章
- vue-用Vue-cli从零开始搭建一个Vue项目
Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- 完整搭建一个vue项目
目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- 创建Vue.js对象:我的第一个Vue.js输出信息
<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...
- 第一个Vue.js案例
第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...
随机推荐
- HDU 4283 You Are the One 【区间DP】
<题目链接> 题目大意: 有$n$个人排成一排要上台表演,每个人有一个屌丝值$pi$.第i个上台表演的人,他的不满意度为$(i-1)*p_i$.现在有一个类似于栈的黑屋子,你可以让某些人进 ...
- MyBatis3系列__01HelloWorld
# MyBatis作为一个ORM框架,其重要程度不用过多介绍.下面开始一起学习吧:本博客的编程方法与MyBatis官方文档基本一致:## 1.创建一个数据库mybatis_learn以及对应的表tbl ...
- 201771010118《面向对象程序设计(java)》第四周学习总结
1.实验目的与要求 (1) 理解用户自定义类的定义: (2) 掌握对象的声明: (3) 学会使用构造函数初始化对象: (4) 使用类属性与方法的使用掌握使用: (5) 掌握package和import ...
- HTML5_提供的 新功能_less 编译_
HTML5_提供的 新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 <div id="ele" class="... ...
- (76)Wangdao.com第十四天_JavaScript 正则表达式对象 RegExp
RegExp Regular Expression,正则表达式是一种表达 文本模式(字符串结构) 的式子. 常常用来按照“给定模式”匹配文本.比如,正则表达式给出一个 Email 地址的模式, ...
- [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 ...
- cadence单一原理图库的设计
- DEV中右键菜单如何只在非空单元格上显示?
问题: 1. 开发时,我的winform程序中有很多gridview,我希望右键菜单只在我点击非空的行时才显示,点击其他空白区域时不显示: 2. 有一个树状导航图,treelist 中的节点都有右键菜 ...
- lcr电桥浅谈
此图告知,现代的lcr电桥使用的都是虚地,阻抗很高. 系统采用的鉴相器比较简单,是检半个正弦基波(RMS有效值积分),可以有效抵御偶次基波. 倒不如直接使用运放电容移相,比较采样法直接采样最高点. 此 ...
- [dev] Go的协程切换问题
子标题:runtime.Gosched() 是干嘛用的? 1. go程序都有一个环境变量,做线程数设置 GOMAXPROCS 2. 当协程数小于等于线程数的时候,程序行为上与多线程没有区别. 3. 当 ...