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    /如果安装了淘宝镜像，可以使用 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

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

   我的解决流程：

   》删除缓存文件

   》执行清理缓存

   》重新安装