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

 

桃之夭夭，思绪纷飞。

 

1、环境搭建

---

 

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是大写）

 

2、建立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

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

   个人解决流程：

   》删除缓存文件

   》执行清理缓存

   》从新安装