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脚手架的更多相关文章

  1. 搭建vue脚手架---vue-cli

    vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...

  2. Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

    ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...

  3. vue-cli 2.0搭建vue脚手架步骤

    1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...

  4. Vue2.0 搭建Vue脚手架(vue-cli)

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知 ...

  5. 搭建vue脚手架,包含Axios、qs、Element-UI、mock等插件的安装配置

    1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4  安装 Mock 2.新建一个vue工程, ...

  6. 快速搭建vue脚手架

    https://segmentfault.com/a/1190000011275993

  7. 脚手架方式搭建vue项目

    一.首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了. 搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一 ...

  8. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  9. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

随机推荐

  1. 平安技术开放日质量保证技术专场第一期 [附部分 ppt]

    4月8号在上海平安大厦,平安证券和Tester联合举办了一场质量保证技术专场,附上部分PPT 平安技术开放日介绍   ppt下载 A/B测试的大数据架构实践 链接: http://pan.baidu. ...

  2. 初次使用BAT,请检查Chrome浏览器和ChromeDriver兼容性

    ChromeDriver可以理解为Chrome驱动,它是架在BAT程序和Chrome之间的桥梁.但是ChromeDriver的问题是,每个版本的兼容范围很窄,通常只能兼容3个Chrome版本. 因此, ...

  3. 机器学习笔记之三-yolov3+win7+vs2017+gpu+opencv编译

    1.环境安装 1.1 vs2017+cuda9.1+cudnn7.0可以和tensorflow一起安装网上教程多,不多说.       唯一需要注意的是vs2017要安装好2015版本的工具集v140 ...

  4. 没讲明白的水题orz

    有一道解释程序的水题没给非计算机专业的同学讲明白orz,在这里再练一下.. 源代码完全没有缩进真是难以忍受.. p.s.懂递归就不用看了#include <stdio.h> int n = ...

  5. C# 时钟控件

    //控件名:myNewClock //作者:刘典武 //时间:2011-06-10 using System; using System.Collections.Generic; using Syst ...

  6. spring框架篇(一)-------spring简介与配置文件使用控制反转事例

    spring简介 Spring 是一个开源框架,中文意思就是春天,也许是作者想让自己的这个框架给Java开发人员带来春天吧.其官方网站是 https://spring.io/ ,可以在官方网站下载到完 ...

  7. python-web自动化-文件上传操作(非input标签的上传,需要借助第三方工具)

    文件上传操作 一.文件上传分两种情况:1. 如果是input可以直接输入路径的,可以直接调send_keys输入路径 2. 非input标签的上传,需要借助第三方工具:    2.1 Autolt 需 ...

  8. Navicat操作SQL server 2008R2文件.bak文件还原

    项目操作过程中,利用Navicat操作SQL Server2008R2数据备份,结果发现数据丢失了很多,不得不先对数据丢失部分进行差异对比,然后再重新输入. 1.利用Navicat导出的数据格式为sq ...

  9. Machine.config 文件中节点<machineKey>的强随机生成

    Machine.config 文件中节点<machineKey>的强随机生成 <machineKey>这个节允许你设置用于加密数据和创建数字签名的服务器特定的密钥.ASP.NE ...

  10. Anatomy of a Database System学习笔记 - 概论、并发控制

    <Anatomy of a Database System>这篇发表于87年.一共48页的论文据说是DBA入门必看,但是找了全网没有找到中文翻译.这篇文章对关系型数据库确实有提纲挈领的作用 ...