1.本地vue开发环境的搭建

  1.1.下载NodeJs.下载地址:https://nodejs.org/en/download/

    node.js的相关结束以及教程:https://www.runoob.com/nodejs/nodejs-tutorial.html

    关于nodejs不做其他相关介绍,学习vue需要用的是nodejs安装时里面带的npm命令,关于npm的详细资料可以看这里https://www.runoob.com/nodejs/nodejs-npm.html,简单说就是包管理工具,vue开发用到的包都是通过npm的一些命令来安装的。

  1.2.安装并配置环境变量。个人习惯将环境变量配置在用户环境变量的里面,如:path:C:\Program Files\node-v12.13.1\;

    配置环境变量的好处是带cmd命令窗口中无论在何位置都可以输入npm的命令。

  1.3.测试nodejs(npm)是否安装成功。打开cmd命令,输入:

npm -v

  由于 npm的服务器在国外所以 安装速度慢,可以使用淘宝的镜像及其命令 cnpm(非必须)。关于npm的相关中文文档:https://cloud.tencent.com/developer/section/1490235,这也是一个新的点。

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm 版本需要大于 3.0,如果版本低于3.0,可以使用下面的命名升级npm,或cnpm或者重新下载高版本的nodejs

#升级 npm
cnpm install npm -g # 升级或安装 cnpm
npm install cnpm -g

  1.4.安装vue

# 最新稳定版
$ npm install vue # 或者用cnpm
cnpm install vue

2.快速搭建大型单页应用。

单页应用:只有一个页面,页面中的内容会根据路由来显示(个人理解)。

多页应用:页面是通过URL跳转到新的页面(个人理解)。

vue相关的教程:https://www.runoob.com/vue2/vue-tutorial.html

  2.1.安装vue脚手架vue-cli

# 全局安装 vue-cli
$ cnpm install --global vue-cli

  2.2.创建一个简单的vue项目。

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project
npm install
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack

  2.3.启动vue项目

$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms > Listening at http://localhost:8080

  注意:cnpm install如果失败可以试试npm install,如果用的是公司内网需要配置外网代理,否则也会失败,配置代理命令。

# 无需验证
npm config set proxy http://proxyserverip:port
npm config set https-proxy http://proxyserverip:port #需要验证
npm config set proxy http://username:password@proxyserverip:port
npm confit set https-proxy http://username:password@proxyserverip:port

install成功后会发现在项目的根路径会有一个名为node_modules的目录,里面有很多的依赖包。

vue学习过程总结(01)- 开发环境的搭建的更多相关文章

  1. Linux基础(01)开发环境的搭建

    内核源码下载 : https://blog.csdn.net/u011375704/article/details/81866427 1.在虚拟机安装Ubuntu 14.04版本 (安装时设置好用户名 ...

  2. windows下vue开发环境的搭建

    一 介绍: vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库 ...

  3. OpenCV2学习笔记01:Linux下OpenCV开发环境的搭建

    个人已经厌倦了Windows下的开发方式,于是决定转到Linux平台上来,当然我也知道这个转变会很艰辛,但是我还是要坚持.所以,后面的所有开发我都会基于Linux和Qt,先从开发环境的搭建开始做起,当 ...

  4. Java开发环境的搭建01——Eclipse篇(Windows)

    搭建环境是换项目组和新入职的开发入项都必须面临的一件事情,搭搭环境,一天就过去了...本着不浪费生命不做重复的无用功,在这里写写环境搭建的基本功,这篇是介绍Java环境搭建,常见的开发IDE无非就两种 ...

  5. VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染

    VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...

  6. 新唐的开发环境的搭建,驱动以及BSP

    https://www.keil.com/demo/eval/arm.htm#DOWNLOAD1,MDK-ARM的IDE集成开发环境:mdk512.exehttp://www.keil.com/fid ...

  7. php从入门到放弃系列-01.php环境的搭建

    php从入门到放弃系列-01.php环境的搭建 一.为什么要学习php 1.php语言适用于中小型网站的快速开发: 2.并且有非常成熟的开源框架,例如yii,thinkphp等: 3.几乎全部的CMS ...

  8. Java开发环境的搭建02——IntelliJ IDEA篇(Windows)

    1.IntelliJ IDEA的下载与安装 IntelliJ IDEA简称IDEA,由JetBrains公司开发,是java语言开发的集成环境,也是目前业界被公认的最好的java开发工具之一.尤其在智 ...

  9. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

随机推荐

  1. 5.1 Paralles 为虚拟机设置静态ip

    一.配置独立ip的环境 前面研究了k8s的组件,核心概念,网络模型,都了解了一遍,现在就要进入实战了,摆在面前的一座大山,必须克服才行---虚拟机搭建,及网络环境配置. 先说说本文的运行环境: mac ...

  2. ASP.NET Core 6框架揭秘实例演示[05]:依赖注入基本编程模式

    毫不夸张地说,整个ASP.NET Core就是建立在依赖注入框架之上的.ASP.NET Core应用在启动时构建管道所需的服务,以及管道处理请求使用到的服务,均来源于依赖注入容器.依赖注入容器不仅为A ...

  3. C#操作读写INI配置文件

    一个完整的INI文件格式由节(section).键(key).值(value)组成.示例如:[section]key1=value1key2=value2; 备注:value的值不要太长,理论上最多不 ...

  4. HTML5知识点笔记

    1.HTML是一种标记语言 2.HTML元素不区分大小写  //可以在xss绕过waf时使用 3.<code></code>为空元素标签 <code/>为自闭合标签 ...

  5. [源码解析] NVIDIA HugeCTR,GPU版本参数服务器--- (4)

    [源码解析] NVIDIA HugeCTR,GPU版本参数服务器--- (4) 目录 [源码解析] NVIDIA HugeCTR,GPU版本参数服务器--- (4) 0x00 摘要 0x01 总体流程 ...

  6. ASP.NET Core 6框架揭秘-实例演示版[持续更新中…]

    作为<ASP.NET Core 3框架揭秘>的升级版,<ASP.NET Core 6框架揭秘>提供了很多新的章节,同时对现有的内容进行大量的修改.虽然本书旨在对ASP.NET ...

  7. Python小游戏之 - 飞机大战 !

    用Python写的"飞机大战"小游戏 源代码如下: # coding=utf-8 import random import os import pygame # 用一个常量来存储屏 ...

  8. DevOpts 前端开发和 Spug

    DevOpts 前端开发和 Spug 朋友新工作是进行 DevOpts 前端开发,涉及 Spug. DevOps 是什么 DevOps 是一种思想.用于促进开发和运维之间的沟通.协作或整合. Tip: ...

  9. tomcat编码错乱问题

    问题场景:相同的代码,在同事电脑上可以正常运行,在我电脑上用项目跑代码的时候,密文没法解密,用main方法就可以,而且用同事代码打的war包在我本地也不行,初步排查,应该是本地环境的问题. 场景1:本 ...

  10. scrapy的介绍、组件、数据流

    scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,我们只需要实现少量代码,就能够快速的抓取到数据内容. scrapy使用了twisted异步网络框架来处理网络通讯,来加快我们的下载速 ...