桃之夭夭,思绪纷飞。

一、环境搭建


1.安装node.js(包含包管理工具npm)

安装包可以到node官网进行下载,穿梭>>>

根据自己的操作系统下载相应版本的安装包,运行后按照操作提示进行即可

测试是否安装成功:在命令提示符下输入 ‘node -v、npm-v’,正确显示版本号即为安装成功。

  

2.安装cnpm(淘宝镜像,可不安装)

由于npm安装插件访问的是国外的服务器,受网络等影响较大,可能会出现无法访问或安装过慢的问题,cnpm为淘宝团队免费提供的完整npmjs.org镜像,以10分钟的频率与官网服务器同步,插件安装稳定、下载速度快

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

安装完成后,我们就可以使用cnpm代替npm进行插件的下载等操作

3.安装webpack

模块打包器

命令: npm install webpack -g  / 如果安装的淘宝镜像,可以使用 cnpm install webpack -g

可使用‘webpack -v’检查是否安装成功

4.安装vue-cli

 vue脚手架,vue.js开发的标准工具,介绍可参考这篇文章>>>vue-cli最全解析

命令:npm install vue-cli -g    /如果安装了淘宝镜像,可以使用

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:等线;
mso-ascii-font-family:等线;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:等线;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:等线;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

cnpm install vue-cli -g

 检查安装: Vue -V   (注意V是大写)

二、创建vue项目


1. 命令:vue init <template-name> <project-name>

模板一般选择webpack即可,项目名称自己起,例如我们起名vuedemo,则安装命令为:vue init webpack vuedemo

安装截图如下:

2.选项介绍

> Project name:项目名称,可不写默认命令中的项目名,注意不能使用大写字母

>Project description:项目描述

>Author:作者

>Vue build:构建,我们选择runtime+(standalone)即可,还有一个选项是runtime-only

>Install vue-router:是否安装vue路由,选择是

>Use ESLint to。。:是否用ESLint来限制你的代码错误和风格

>unit tests,单元测试,根据自己项目需要,这里示例项目选no

>Setup e2e。。:是否安装e2e来进行用户行为模拟测试

>Should we run npm。。。:使用哪种方式安装依赖包,有三个npm、yarm、self(后期自己决定),示例项目选择npm

好了,接下来,等待安装完成即可

3.运行

安装完成后,使用命令:cd <project name> 进入项目目录,运行命令 npm run dev

等待出现提示your application is running here:localhost:端口,在浏览器访问,显示如下即可

4.安装过程异常处理

新创建项目报错:npm ERR! Unexpected end of JSON input while parsing near

参考解决方案,传送>>>

我的解决流程:

》删除缓存文件

》执行清理缓存

》重新安装

vue使用--环境搭建与基本项目创建说明的更多相关文章

  1. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  2. 浅入深出Vue:环境搭建

    浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...

  3. vue开发环境搭建Mac版

    一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对  ...

  4. VUE CLI环境搭建文档

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

  5. express+mysql+vue开发环境搭建

    最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...

  6. 一 vue开发环境搭建

    2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...

  7. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  8. Python环境搭建、python项目以docker镜像方式部署到Linux

    Python环境搭建.python项目以docker镜像方式部署到Linux 本文的项目是用Python写的,记录了生成docker镜像,然后整个项目在Linux跑起来的过程: 原文链接:https: ...

  9. Cocos2d-x v3.0正式版尝鲜体验【1】 环境搭建和新建项目

    Cocos2d-x v3.0在前天最终公布正式版了,等了大半年最终出来了.一直没去碰之前的3.0各种beta,rc版本号,就想等正式版出来再尝试. 昨天也參加了触控科技在成都举办的沙龙活动.看到作者王 ...

随机推荐

  1. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) E. Arson In Berland Forest 二分 前缀和

    E. Arson In Berland Forest The Berland Forest can be represented as an infinite cell plane. Every ce ...

  2. Python进阶小结

    目录 一.异常TODO 二.深浅拷贝 2.1 拷贝 2.2 浅拷贝 2.3 深拷贝 三.数据类型内置方法 3.1 数字类型内置方法 3.1.1 整型 3.1.2 浮点型 3.2 字符串类型内置方法 3 ...

  3. Tree-Shaking性能优化实践 - 原理篇

    Tree-Shaking性能优化实践 - 原理篇   一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前 ...

  4. 利用OD破解一个简单的C语言程序

    最近在学习汇编(看的是王爽老师的<汇编语言(第三版)>),然后想尝试使用OD(Ollydbg)软件破解一个简单的C语言程序练练手. 环境: C语言编译环境:VC++6.0 系统:在Wind ...

  5. JVM基础详解

    JVM基础解析(一) Java里面有 JDK ,JRE, JVM ,这三者的关系是怎么样的呢? JDK是编译时环境: 整个Java的核心,包括了Java运行环境JRE.Java工具和Java基础类库 ...

  6. 19-视图集ViewSet和路由Routers

    一.视图集ViewSet 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: 1.list()提供一组数据 2.retrieve()提供单个数据 3.create()创建数据 4.up ...

  7. SpringCloud的入门学习之Eureka(Eureka的单节点)

    SpringCloud--->Spring生态体系的微服务架构:https://spring.io/ 官网贴图,如下所示,介绍了微服务的架构体系(话说,英语好读官网,可能很爽吧,没体验过). 1 ...

  8. Koa + GraphQL 示例

    初始化项目 创建 graphql-example 文件夹进入后初始化一个 package.json 文件. $ mkdir graphql-example && cd $_ $ yar ...

  9. sqlite3数据库最大可以是多大?可以存放多少数据?读写性能怎么样?

    sqlite是款不错的数据库,使用方便,不需要事先安装软件,事先建表.很多人担心它的性能和数据存储量问题. 比如有的网友问:Sqlite数据库最大可以多大呀?会不会像acc数据库那样,几十MB就暴掉了 ...

  10. Java生鲜电商平台-你应该保留的一些学习态度与学习方法

    Java生鲜电商平台-你应该保留的一些学习态度与学习方法 说明:Java开源生鲜电商平台这一类学习课程系列已经初步接近了尾声,那么作为学习生鲜电商B2B2C电商的你,应该有一个什么样子的学习态度与学习 ...