vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）

Vue 提供了一个官方的cli，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

一、vue cli脚手架

　　脚手架通过webpack搭建开发环境

　　使用ES6语法

　　打包压缩js为一个文件

　　项目文件在环境中编译，而不是浏览器

　　实现页面自动刷新

 

基于nodejs和npm，可以在控制台输入node -v 或node --version查看node.js是否安装好以及npm -v查看是否安装好，安装好则会有本版提示。

 

另外分享几个npm的常用命令

npm -v #显示版本，检查npm 是否正确安装。

npm install express #安装express模块

npm install -g express #全局安装express模块

npm list #列出已安装模块

npm show express #显示模块详情

npm update #升级当前目录下的项目的所有模块

npm update express #升级当前目录下的项目的指定模块

npm update -g express #升级全局安装的express模块

npm uninstall express #删除指定的模块

二、安装webpack依赖

如果之前没全局安装过webpack，就先安装一下

$ npm install webpack -g

 

我第二步创建一个基于 webpack 模板的新项目出错，SyntaxError:Block-scoped declarations <let,const,function,class>not yet supported outside strict mode

 

　于是我就以为是不是因为没有安装webpack依赖或安装错误，就重装了一个，但是依旧报错，

 后来上网查了，这是因为node版本太低导致报了这个错误。

解决方案是在官网下载新的版本或者升级一下node版本

 

解决问题：node 升级

查资料发现node有一个模块叫 n ，是专门用来管理node.js的版本的。可以按照以下步骤输入命令来升级node版本

第一步：首先安装n模块：

npm install -g n

第二步：升级node.js到最新稳定版

n stable

第二步：n后面也可以跟随版本号比如：

n v0.10.26

n 0.10.26

 

本来不想去官网下载node的，所以就想输入上述命令，任何进行升级。但是输入第一个npm install -g n命令后就出现错误了，上网查了每个人错误显示都不一样，不知道到底是因为什么。所以就直接去官网下载了一个node安装。

 

升级之前查的node版本号，npm版本号如下，

 

 

在官网下载了最新版本的nodejs，点击安装，升级之后查询的版本号，

 

 

查vue的版本号，不知道是路径不对还是怎么回事，应该大写  -V

 

接着就继续安装。

重新安装了全局的vue-cli

npm install --global vue-cli或者npm install -g vue-cli两者效果相同

安装好了以后可以输入 vue -V查看vue的版本号

 

下一步就是创建一个基于 webpack 模板的新项目,（初始化项目）

在这里可以选择把项目存放的路劲，我选择安装在D盘

vue init webpack my-project（my-project指的是工程目录的名字），

 

 

Project name 项目里面的文件名（不要有中文,不能有大写字母capital letters）

Project description  文件描述

Author  作者

Vue build  

Install vue-router？ 安装路由，可以先不安装，后面可以手动安装，

Use ESLint to  lint your code? 代码检查，在开发过程中可能需要，但是测试中不要，因为必须满足vue的代码格式，比如空格，换行。可以选N

Set up unit tests?这个是给测试用的，测试模块，

Setup e2e tests with Nightwatch? 这个也是测试模块

Should we run 'npm install' for you after the project has been reaeted?这里有三个选项，我选择的是npm 

 

我没有进入自己的项目里面，就直接运行所以造成错误。

 

 

项目目录结构：

index.html：项目根视图

.postcssrc.js :postcss配置文件

.gitignore :上传到git上的忽略文件，

.babelrc ：针对ES6的

.editorconfig:配置文件，里面一些配置信息，比如编码方式

static:静态文件目录，服务器启动以后，可以访问到文件下的东西，

config配置文件，主要针对对开发上服务器的配置，跨域等，

build：包含服务器和webpack