搭建vue脚手架
1.Node.js安装
1.1下载安装
在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可
1.2测试安装是否成功
Windows+R打开cmd窗口,输入node -v回车出现版本号,即安装成功!

2.Vue.js安装
2.1使用NPM安装 —NPM: NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题
2.1.1使用淘宝的镜像及其命令 cnpm 安装淘宝的镜像:
打开cmd命令框,输入
npm install -g cnpm –registry=https://registry.npm.taobao.org 回车
加载完成后
2.1.2在命令框输入
cnpm install vue 回车
以上vue.js安装完毕
3.脚手架搭建
3.1Vue-cli安装
在cmd命令框输入
cnpm install -g vue-cli(回车)
3.2搭建测试
3.2.1.在你的vue安装目录下(我创建在E:\vue)新建文件夹vue
3.2.2.打开cmd命令窗口输入cd vue,进入E:\vue,输入vue list可以看到列出了可以使用的模板

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

我们init命令安装
vue init webpack test (我在这建的是test1,因为我本地已经建好了一个test)

注意创建新的文件时出现Project name之后要自己手动选择创建选项,否则创建将会一直停留在Project name

进入test文件夹
cd test 1

安装依赖
cnpm install

启动
npm run dev

在浏览器打开

文件目录

搭建vue脚手架的更多相关文章
- 搭建vue脚手架---vue-cli
vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...
- Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)
ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...
- vue-cli 2.0搭建vue脚手架步骤
1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...
- Vue2.0 搭建Vue脚手架(vue-cli)
介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知 ...
- 搭建vue脚手架,包含Axios、qs、Element-UI、mock等插件的安装配置
1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4 安装 Mock 2.新建一个vue工程, ...
- 快速搭建vue脚手架
https://segmentfault.com/a/1190000011275993
- 脚手架方式搭建vue项目
一.首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了. 搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一 ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- 从0开始搭建vue+webpack脚手架(三)
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
随机推荐
- Spring boot加载REACTIVE源码分析
一,加载REACTIVE相关自动配置 spring boot通过判断含org.springframework.web.reactive.DispatcherHandler字节文件就确定程序类型是REA ...
- 小程序sitemap配置
这几天在官网文档中发现小程序也支持索引了链接,就是是在根目录下新建sitemap.json 文件. { "rules": [ { "action": " ...
- winform里面的Form1.Designer.cs
Program.cs是程序入口,也就是Main函数.Form1.cs是实现功能的代码,包括你的自定义方法和事件.Form1.Designer.cs是你的画面的设计代码,一般由系统自动生成,也可以手动修 ...
- Sublime Text 3安装Package Control
Package Control官网:https://packagecontrol.io/installation#st3 ctrl + ` 或者 View > Show Console呼出控制台 ...
- ef6.0+mysql配合使用的问题
折腾了很久由于所用到的各种库版本问题:后来终于组合成了一个可用的:记录下各种库的版本 ef6.0 mysql5.5 mysql-connector-net-6.9.12.msi mysql-for-v ...
- Android View添加删除或隐藏显示的默认动画;
代码中给控件设置Visibility ? VISIBLE : GONE ;时太生硬,用户体验不好:设置一个Android ViewGroup的默认动画很实用: 给需要添加动画的控件或布局的父布局,记住 ...
- 三、CSS样式——文本
CSS文本 概念:CSS文本属性可定义文本外观 通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进 属性 描述 color 文本颜色 direction 文本方向 line-h ...
- Linux 下的 Docker 安装与使用
一.安装与配置 1.安装依赖包 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2.设置阿里云镜像源 sudo yum ...
- (8/24) 图片跳坑大战--css中的图片处理
前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...
- Anatomy of a Database System学习笔记 - 查询
查询解析 解析会生成一个查询的内部展示.格式检查包含在解析过程中. 每次解析一个SELECT,步骤如下:1. 从FROM里找到表名,转换成schema.tablename.这一步需要调用目录管理器ca ...