1. 简单了解Node.js、npm,安装Node.js,下载网址:http://nodejs.cn/download/
  2. 查看node,npm安装成功与否。打开cmd命令行,输入命令 node-v  、npm -v
  3. 了解cnpm,输入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org


    查看安装成功与否 输入命令 cnpm -v

  4. 了解webpack,借助npm工具安装webpack。输入命令 npm install webpack -g

    查看安装成功与否 输入命令 webpack -v
  5. 了解vue-cli脚手架工具,安装输入命令 npm intall -g vue-cli
    查看安装成功与否,输入命令 vue -V
  6. 准备搭建项目,切换到想要放项目的文件夹下,输入命令 cd\YourFileName\...(这一步视自身情况操作,可以忽略)

  7. 初始化项目,输入命令 vue init webpack temp_project (注意这里的temp_project是项目文件夹名称,该命名不能使用大写字母)

  8. 切换到项目文件夹下,安装npm。先后输入命令 cd temp_project    ,   npm install  

  9. 在项目文件夹下,使用npm工具安装路由和请求模块 输入命令 npm install vue-router vue-resource --save

  10. 运行项目,输入命令 npm run dev

  11. 打开我们的网站 浏览器输入上面最后的网址 http://localhost:8080 (记得你的8080端口不要被别的进程占用)

  

暂且简单完成搭建,鼓舞鼓舞自己。后续有待详细学习学习。继续分享~

☆☆☆ 如有错漏之处,希望大家不吝指出。如果喜欢,希望大家多多点赞。笔芯!☆☆☆

Windows下vue-cli脚手架搭建入门<一>的更多相关文章

  1. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  2. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  3. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  4. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  5. Windows下Python环境的搭建

    我刚开始接触Python没多久,当然这也是为初学者来更好的去入门Python,我电脑上既跑着Windows也跑着Red Hat的Linux,相比较而言,开发我还是更青睐于Linux系统,很多开发工具红 ...

  6. windows下nodejs express安装及入门网站,视频资料,开源项目介绍

    windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件下载地址: ...

  7. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  8. Windows下SVN服务器的搭建步骤

    1.下载svn服务端和客户端 服务端VISUALSVN SERVER:https://www.visualsvn.com/ 客户端TortoiseSVN:https://tortoisesvn.net ...

  9. windows 下使用 Filezilla server 搭建 ftp 服务器

    windows 下使用 Filezilla server 搭建 ftp 服务器 1. Filezilla server 免费,开源, ftp 服务端 2. 下载安装, windows  https:/ ...

  10. windows下使用redis,Redis入门使用,Redis基础命令

    windows下使用redis,Redis入门使用,Redis基础命令 >>>>>>>>>>>>>>>> ...

随机推荐

  1. Linux 第五天

    网络命令 1)write 给在线用户发信息(需按Crtl+D保存结束,w命令可看在线用户) 语法:write 用户名 2)wall 发广播信息 英文原意:write all 语法:wall 信息 3) ...

  2. 前端之js中的函数

    函数 函数就是重复执行的代码片.   函数定义与执行 <script type="text/javascript">     // 函数定义     function ...

  3. request接受表单数据中文乱码问题分析

    这个问题困扰了我很久,今天就来探索探索. [页面乱码] 浏览器的默认编码格式和你的jsp中的编码格式不统一造成的.假如你的jsp的头编码设置为utf-8,但是浏览器设置的是gbk,就会乱码. [pos ...

  4. Codeforces Round #539--1113B - Sasha and Magnetic Machines

    https://codeforces.com/contest/1113/problem/B 思想不难,但是在比较大小的时候,我选择了很笨的方法,我用两个数变化之后的差值大小来进行选择,然后最后再进行数 ...

  5. ModelAndView对象

    ModelAndView属性中两个最重要的属性是model和view. view即视图,保存的是视图信息. model即模型,以<K,V>形式保存模型数据,上图可以看到是MdelMap类型 ...

  6. 福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)

    Team information 队名: 彳艮彳亍团队 各成员短学号.名: 学号: 姓名: 本次博客链接: 041602209 黄毓明(临时队长)  https://www.cnblogs.com/m ...

  7. Eclipse运行时发生An internal error occurred during:“**************” 的解决办法

    2015-05-20 原因分析: 当前工作目录下的 .project 文件 不一致 例如1: 南京大学 Mooctest 提交考试试卷时出现的:An internal error occurred d ...

  8. R-CNN,SPP-NET, Fast-R-CNN,Faster-R-CNN, YOLO, SSD系列深度学习检测方法梳理

    1. R-CNN:Rich feature hierarchies for accurate object detection and semantic segmentation 技术路线:selec ...

  9. 学习在dos下使用gcc来编译

    这两年里,断断续续的学习和使用c,平时都是在CodeBlocks里写代码,编译程序,点一下按钮就行了.对整个编译过程是一点儿都不了解.相比当年学习java,真的是选择了两个不同的路,当年学习java的 ...

  10. cad2013卸载/安装失败/如何彻底卸载清除干净cad2013注册表和文件的方法

    cad2013提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2013失败提示cad2013安装未完成,某些产品无法安装,也有时候想重新安装cad2013 ...