vue学习过程总结(01)- 开发环境的搭建
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)- 开发环境的搭建的更多相关文章
- Linux基础(01)开发环境的搭建
内核源码下载 : https://blog.csdn.net/u011375704/article/details/81866427 1.在虚拟机安装Ubuntu 14.04版本 (安装时设置好用户名 ...
- windows下vue开发环境的搭建
一 介绍: vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库 ...
- OpenCV2学习笔记01:Linux下OpenCV开发环境的搭建
个人已经厌倦了Windows下的开发方式,于是决定转到Linux平台上来,当然我也知道这个转变会很艰辛,但是我还是要坚持.所以,后面的所有开发我都会基于Linux和Qt,先从开发环境的搭建开始做起,当 ...
- Java开发环境的搭建01——Eclipse篇(Windows)
搭建环境是换项目组和新入职的开发入项都必须面临的一件事情,搭搭环境,一天就过去了...本着不浪费生命不做重复的无用功,在这里写写环境搭建的基本功,这篇是介绍Java环境搭建,常见的开发IDE无非就两种 ...
- VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...
- 新唐的开发环境的搭建,驱动以及BSP
https://www.keil.com/demo/eval/arm.htm#DOWNLOAD1,MDK-ARM的IDE集成开发环境:mdk512.exehttp://www.keil.com/fid ...
- php从入门到放弃系列-01.php环境的搭建
php从入门到放弃系列-01.php环境的搭建 一.为什么要学习php 1.php语言适用于中小型网站的快速开发: 2.并且有非常成熟的开源框架,例如yii,thinkphp等: 3.几乎全部的CMS ...
- Java开发环境的搭建02——IntelliJ IDEA篇(Windows)
1.IntelliJ IDEA的下载与安装 IntelliJ IDEA简称IDEA,由JetBrains公司开发,是java语言开发的集成环境,也是目前业界被公认的最好的java开发工具之一.尤其在智 ...
- 总结:Mac前端开发环境的搭建(配置)
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
随机推荐
- Linux基础:初识shell之系统命令基础
一 shell介绍 shell Shell 中文意思贝壳,寓意类似内核的壳.Shell是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务,简而言之就是只要能够操作应用 ...
- x86架构中的外部中断结构-Part 1:中断控制器的演化
本文主要讲解了x86体系架构从外部设备接受中断的过程,本文是系列文章的第一部分,试图回答以下问题: 什么是PIC以及它的用途是什么? 什么是APIC以及它的用途是什么?LAPIC和I/O APIC的目 ...
- Windows查看本机SSH公钥,生成公钥
#Windows查看本机**SSH**公钥,生成公钥<br>--- ### 1.查看 ssh 公钥方法: 1. 打开你的 git bash 窗口 2. 进入 .ssh 目录:cd ~/.s ...
- 树莓派使用docker安装青龙面板和改面板端口号
配置环境 系统:Raspbian 11(64位) 设备:树莓派4B 系统默认没有防火墙,所以就不用在防火墙中开放端口. 一.安装docker(已安装省略) 1.安装 curl -fsSL https: ...
- Kafka经典三大问:数据有序丢失重复
Kafka经典三大问:数据有序丢失重复 在kafka中有三个经典的问题: 如何保证数据有序性 如何解决数据丢失问题 如何处理数据重复消费 这些不光是面试常客,更是日常使用过程中会遇到的几个问题,下面分 ...
- 库存数量管理方案一:基于SQL存储过程和MERGE(结合活字格案例)
库存更新是ERP系统的基本功能,一般包括以下动作:1.以库位编号和商品编号查询库存表,如果查询不到,则添加一行库存信息,如:(出入库)库位编号/(出入库)商品编号/(出入库)+或-数量2.以库位编号和 ...
- yield return Il代码讲解
反编译后,迭代器用的是状态机,栈本身就是状态机,由于协程本身也有栈, 我怀疑C#中的 迭代器和基于任务的异步编程是协程(未经过验证) .class nested private auto ansi s ...
- Linux中查看进程与日志
转至:https://www.cnblogs.com/dengxiaoning/p/13336778.html Linux尽管使用频繁,仍然每次都还是需要到处去找相关的命令,如进程,日志之类的,既然这 ...
- Linux系统最重要的工具——Shell学习笔记
一.为什么学习Shell脚本语言 1.Shell脚本语言是实现Linux/UNIX系统管理及自动化运维必备的重要工具,Linux/UNIX系统底层及 基础应用软件的核心大都涉及Shell脚本的内容. ...
- C语言之判断质数算法
今天学校OJ的一题判断是质数和合数. 首先我们要弄明白质数和合数的概念:质数就是除了本身和1以外没有其他因数的数,合数就是除了本身和1以外还有其他因数的数.注意:1既不是质数也不是合数. 明白了概念, ...