vue使用--环境搭建与基本项目创建说明

桃之夭夭，思绪纷飞。

一、环境搭建

---

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

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

我的解决流程：

》删除缓存文件

》执行清理缓存

》重新安装