Vue CLI 讲解
什么是 Vue CLI
-
如果你只是简单写几个
Vue
的Demo
程序, 那么你不需要Vue CLI
. -
如果你在开发大型项目, 那么你需要, 并且必然需要使用
Vue CLI
- 使用
Vue.js
开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 - 如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
- 使用
-
CLI
是什么意思?CLI
是Command-Line Interface
, 翻译为命令行界面, 但是俗称脚手架.Vue CLI
是一个官方发布vue.js
项目脚手架- 使用
vue-cli
可以快速搭建Vue
开发环境以及对应的webpack
配置.
Vue CLI 使用前提 - Node
-
安装
NodeJS
- 可以直接在官方网站中下载安装.
- 网址: http://nodejs.cn/download/
-
检测安装的版本
- 默认情况下自动安装
Node
和NPM
Node
环境要求8.9
以上或者更高版本
- 默认情况下自动安装
-
什么是
NPM
呢?NPM
的全称是Node Package Manager
- 是一个
NodeJS
包管理和分发工具,已经成为了非官方的发布Node
模块(包)的标准。 - 后续我们会经常使用
NPM
来安装一些开发过程中依赖包.
注意事项:
-
node npm
-
node:js
运行时的环境,可以使js
运行在服务器之上 -
npm
: 依赖包管理工具,安装、卸载、打包…等操作 -
npm cnpm yarn….
cnpm
跟npm
用法完全一致,只是在执行命令时将npm
改为cnpm
npm install -g yarn
npm
仍然提供了一个非常有用的解决方案,支持大量的测试用例。大多数开发人员使用原始npm
客户端仍然可以做得很好yarn
的确定性安装,可以避免很多潜在的问题,相对安全pnpm
可能是一些测试用例的更好的选择。例如,它可以在运行大量集成测试并希望尽可能快地安装依赖关系的中小型团队中发挥作用
-
版本
-
Vue:2.6.x
(正在使用) -
Vue:3.x
(最新版) -
Vue-cli:4.5.11
-
Vue CLI的使用
-
安装
Vue
脚手架-
npm install –g @vue/cli
(后面不跟版本,下载的是3.0以上的最新版本)
-
-
卸载
vue-cli 3.0
及以上版本 -
注意:上面安装的是
Vue CLI3
的版本,如果需要想按照Vue CLI2
的方式初始化项目时不可以的 -
Vue CLI2
初始化项目vue init webpack my-project
-
Vue CLI3
初始化项目-
vue create my-project
(这里我创建的是learn-vuecli
) -
选择手动配置
-
根据自己的需求选择对象的选项
-
选择版本(我选择2.x)
-
选择插件的配置是否单独放在一个文件中
-
是否保存你选择的配置方便下一次直接使用。y是,n否。
-
等待项目搭建完成
-
进入项目启动服务
-
浏览器访问(
http://localhost:8080
)在cmd
里面键盘按住Ctrl
然后点击网址进入
-
-
项目文件含义:
-