11,第一个vue-cli项目
1、什么是vue-cli
vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加的快速;
项目的功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
2、需要的环境
- Node.js:http://nodejs.cn/download/
安装就是无脑的下一步就好,安装在自己的环境目录下 - Git:https://git-scm.com/doenloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/
确认nodejs安装成功:
-
cmd下输入
node -v
,查看是否能够正确打印出版本号即可! -
cmd下输入
npm -v
,查看是否能够正确打印出版本号即可!
这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!
安装Node.js淘宝镜像加速器(cnpm)
这样的话,下载会快很多~ -
# -g 就是全局安装 npm install cnpm -g # 或使用如下语句解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org
-
我执行的代码是
-
npm install --registry=https://registry.npm.taobao.org
-
安装vue-cli
-
cnpm install vue-cli -g
安装完成以后 运行 cnpm -v: 显示安装的cnpm的版本
-
输入
vue list
-
进入想要创建Vue项目的路径,下面是我的操作,我的默认是在c盘,但是我想创建在d盘
-
D: cd D:\VueDemo\Demo1 vue init webpack myvue
一路都选择no即可;
说明:- Project name:项目名称,默认回车即可
- Project description:项目描述,默认回车即可
- Author:项目作者,默认回车即可
- Vue build (Use arrow keys):选择第一个即可
- Install vue-router:是否安装vue-router,选择n不安装(后期需要再手动添加)
- Use ESLint to lint your code:是否使用ESLint做代码检查,选择n不安装(后期需要再手动添加)
- Set up unit tests:单元测试相关,选择n不安装(后期需要再手动添加)
- Setupe2etests with Nightwatch:单元测试相关,选择n不安装(后期需要再手动添加)
- Should we run npm install for you after the,project has been created:创建完成后直接初始化,选择n,我们手动执行;运行结果!
-
顺序输入下面的代码–表示初始化并运行
-
cd myvue npm install npm run dev//启动
如果在npm install运行完报错的话,仔细看dos命令的最后两行,按照提示经行修复,没有报error就可以执行下一个dos命令了
-
结束
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iatg52rH-1613875497690)(C:\Users\zp\AppData\Roaming\Typora\typora-user-images\image-20201202193942494.png)]
-
ctrl + c 停止运行
-
然后用idea打开项目,到项目名那一层就可以了
-
然后就是熟悉Vue项目的路径了
-
写在后面:因为我把idea重装了一次,所以当我再次打开vue项目时出现了问题
-
首先是需要重新安装vue插件
-
然后再npm run dev 时出现了问题
-
最后解决:
-
先初始化
npm init -f
-
然后又修改了项目下的package-json文件
-
{ "name": "VueDemo", "version": "1.0.0", "description": "npm install-package", "main": "index.js", "dependencies": { "vue-router": "^3.5.1" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" "private": true, }
-
“description”: “npm install-package”,
-
“private”: true,
-
这两个都是改的
-
-
-
-
最后按照上面的安装记录重新安装了一次,启动正常