Vue-cli
首先要明确一件事情:Vue-CLI ≠ Vue,Vue-CLI就是一个Vue工具。
1、单文件组件
在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由JS驱动的时候,下面这些缺点将变得非常明显:
- 所有的组件都放同一个html文件中
- 没有构建步骤,不能使用npm来管理项目
- 缺乏语法高亮和提示
- 没有针对单个组件的css样式支持
针对于上述的问题,vue框架发布了vue-cli
项目生成
工具,Vue-cli是一个基于 Vue.js 进行快速开发的完整系统, 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。
2、工具安装
Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v10 以上)。
网址:http://npmjs.com
## 安装
npm install -g @vue/cli
## 安装成功后,检查
vue --version
vue -V
# Vue和VueCLI是两回事
## 卸载 其实这个不经常使用的
npm uninstall -g @vue/cli
如果需要安装其他版本,可以使用
npm install -g @vue/cli@版本号
的方式进行指定版本。
如果最新版安装不成功,可以尝试以下3种方式去解决:
- 断网,使用热点共享流量去执行安装命令
- 安装其他版本
- 切换一下npm镜像源,切换成taobao
3、创建项目
# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令
# 如果当前你的终端工作路径带有中文或者空格,你可以使用`cd 路径`形式进行路径切换,切换到符合要求的路径中
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
## 例
vue create myproject
# 上述命令中,可以允许变的就是`myproject`部分
以下步骤以Vue CLI v4.5.6
为例,仅供参考,在实际使用时,请以自身需求为准进行配置
- 预设选择
第一个是默认的Vue 2 项目 集成了babel 和 eslint
第二个是默认的Vue 3 (预览版本) 集成了babel 和 eslint
第三个是自定义的类型
- 选择预设功能(根据自身项目需要选择)
- 选择Vue版本
- 选择
ESlint
配置(如果启用)
- 选择额外的
eslint
功能
- 是否独立配置
- 是否保存本次操作预设
- 项目创建成功
4、目录结构介绍
- src(最主要的目录、后期很多操作都在这个目录中完成)
- main.js:项目/程序入口文件 (该文件中JavaScript代码都会被执行)
- App.vue:根组件(万物之根)
- components:自定义的
功能
组件 - assets:静态资源目录(图片、视频、音频等就是静态资源)
- views:(刚刚创建好的项目是没有的,后期会用到)存放
视图
组件的
5、项目的运行及注意事项
###5.1、项目的启停
如上图所示,在创建项目完成后有提示我们后续的操作:
- 在命令行中进入项目目录
- 运行
npm run serve
命令来启动项目
按照上述命令执行后,我们会见到如下的效果,即表示项目运行成功:
注意:默认端口号会从8080开始,如果再次启动其他项目后续会以8081、8082……进行监听。
如果需要停止正在运行的项目,可以选择以下两种方式任一:
- 关闭终端
- 在终端中按下组合键
Ctrl + C
(Cancel),随后选择Y
并键入回车
(如下图)
5.2、关于ESlint
ESlint用于规范项目的编码,大型项目一般多人开发,为了避免一些个人编程恶习坑自己坑别人
,项目中使用了ESlint会起到紧箍咒
的作用,强制开发人员注意代码规范。例如,在不使用ESlint的情况下,JS允许我们声明一个不变量但不使用。如果使用了ESlint,在上述情况下会报错如下:
关于ESlint的报错,有一份错误参照,可以访问以下地址查看:https://cn.eslint.org/docs/rules/