Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架。
一、vue cli脚手架
  脚手架通过webpack搭建开发环境
  使用ES6语法
  打包压缩js为一个文件
  项目文件在环境中编译,而不是浏览器
  实现页面自动刷新
 
基于nodejs和npm,可以在控制台输入node -v 或node --version查看node.js是否安装好以及npm -v查看是否安装好,安装好则会有本版提示。
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP

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

二、安装webpack依赖

如果之前没全局安装过webpack,就先安装一下
$ npm install webpack -g
 
我第二步创建一个基于 webpack 模板的新项目出错,SyntaxError:Block-scoped declarations <let,const,function,class>not yet supported outside strict mode
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
 于是我就以为是不是因为没有安装webpack依赖或安装错误,就重装了一个,但是依旧报错,
 后来上网查了,这是因为node版本太低导致报了这个错误。
解决方案是在官网下载新的版本或者升级一下node版本

解决问题:node 升级

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

第一步:首先安装n模块:
第二步:升级node.js到最新稳定版
第二步:n后面也可以跟随版本号比如:
 
本来不想去官网下载node的,所以就想输入上述命令,任何进行升级。但是输入第一个npm install -g n命令后就出现错误了,上网查了每个人错误显示都不一样,不知道到底是因为什么。所以就直接去官网下载了一个node安装。
 
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
升级之前查的node版本号,npm版本号如下,
 
 
 
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
在官网下载了最新版本的nodejs,点击安装,升级之后查询的版本号,
 
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
查vue的版本号,不知道是路径不对还是怎么回事,应该大写  -V
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
 
接着就继续安装。
重新安装了全局的vue-cli
npm install --global vue-cli或者npm install -g vue-cli两者效果相同
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
安装好了以后可以输入 vue -V查看vue的版本号
 
下一步就是创建一个基于 webpack 模板的新项目,(初始化项目)
在这里可以选择把项目存放的路劲,我选择安装在D盘
vue init webpack my-project(my-project指的是工程目录的名字),
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
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 
 
我没有进入自己的项目里面,就直接运行所以造成错误。
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHPvue搭建cli脚手架环境(出现问题及解决,主要是node版本低)-LMLPHP
 
 
 
项目目录结构:
index.html:项目根视图
.postcssrc.js :postcss配置文件
.gitignore :上传到git上的忽略文件,
.babelrc :针对ES6的
.editorconfig:配置文件,里面一些配置信息,比如编码方式
static:静态文件目录,服务器启动以后,可以访问到文件下的东西,
config配置文件,主要针对对开发上服务器的配置,跨域等,
build:包含服务器和webpack
 
 
05-10 23:09
查看更多