vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)
2024-09-30 05:38:14
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.26n 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
最新文章
- MicroERP开发技术分享:技术选型
- Sublime Text 注册码 License Key
- Robot Framework安装教程
- uva10344 23 out of 5
- 树莓派(Raspberry Pi)修改时区
- 《Haskell趣学指南 Learn You a Haskell for Great Good!》-代码实验
- [AngularJS] ngModelController render function
- 详解Win2003 IIS6.0 301重定向带参数的问题(转摘)
- servlet的含义和作用
- ASP.NET MVC 單元測試系列
- kafka 日常使用和数据副本模型的理解
- JDK8 Stream操作整理
- 20172306 2018-2019-2 《Java程序设计与数据结构》第八周学习总结
- python中的顺序表
- uva11827 处理下输入
- CentOS6 安装gnutls
- Maven 安装 on centos7
- 关于https中的算法
- mybatis结合redis实战二级缓存
- activiti5.13工作流系列(一)-初识
热门文章
- nodeJS进程管理器pm2
- xheditor的参数配置详解
- CentOS 6.6 安装nfs网络文件系统
- iOS7.1企业版发布后用户通过sarafi浏览器安装无效的解决方案
- 【离线做法 树状数组】luoguP1972 [SDOI2009]HH的项链
- 【贪心】bzoj1572: [Usaco2009 Open]工作安排Job
- 004 html常用标签
- Git学习——工作区和暂存区
- GIMP工具箱的自定义操作
- 【curl】【php】curl报错,错误代码77,CURLE_SSL_CACERT_BADFILE (77)解决方法