Vue-cli了解、安装与简单上手

灰太狼 2022-01-27 12:09 355阅读 0赞

**一、了解vue-cli：**

*  在真实的vue项目中是要借助webpack打包工具的，以便于维护。但是每做一个项目都要安装webpack的话是很麻烦的，于是vue就提供了脚手架工具Vue-cli,通过这个脚手架就可以快速的搭建一个vue项目，并且这个脚手架还自带了webpack的各种配置。通过这个工具我们就可以迅速上手工程级别的vue项目开发。
 *  当用vue-cli构建一个工程的时候，发现需要熟练掌握es6，而vue的全家桶(**vue-cli,vue-router,vue-resource,vuex**)还是都要用上的。vue.js有著名的全家桶系列，包含了vue-router，vuex，vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

**二、安装vue-cli**  
【注意】在安装vue-cli之前需要提前安装好node和npm

（1） 在Vue的管网的学习菜单栏下的教程部分，在里面可以找到vue-cli。

根据文档:https://cli.vuejs.org/  
命令进行安装  
打开命令行( win+r)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
或者根据如下命令：

> \#全局安装  
> $ npm install --global vue-cli  
> \#创建一个基于 webpack 模板的新项目  
> $ vue init webpack my-project  
> \#安装依赖  
> $ cd my-project  
> $ npm run dev

（2）其中npm run dev 命令是启动项目的，这个命令实际上是启动文件package.json里面的webpack-dev-server  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
（3）输入命令后，会跳出几个选项让你回答：

*  Project name (baoge)：  
    \-----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
 *  Project description (A Vue.js project)：  
    \----项目描述，也可直接点击回车，使用默认名字Author ()： ----作者，输入dongxili

接下来会让用户选择：

*  Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
 *  Runtime-only: about 6KB lighter min+gzip, but templates (or any  
    Vue-specificHTML) are ONLY allowed in .vue files - render functions  
    are required elsewhere 仅运行时，已经有推荐了就选择第一个了
 *  Install vue-router? (Y/n)  
    是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
 *  Use ESLint to lint your code? (Y/n)  
    是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
 *  接下来也是选择题Pick an ESLint preset (Use arrow keys)  
    选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
 *  Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
 *  Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车

（4）安装完成后可以在自己建立的项目目录中看到如下文件,同时会在命令行提示我们可以在localhost:8080这个网址访问我们的项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]  
（5）每个文件夹的大概意思是如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]  
**三、使用vue-cli**  
自己的项目文件都需要放到 src 文件夹下。  
在项目开发完成之后，可以输入 npm run build 来进行打包工作。打包完成后，会生成 dist 文件夹,项目上线时，只需要将 dist 文件夹放到服务器就行了。

vue基础知识点:  
[一、vue安装&实例创建&挂载点&模板][vue]  
[二、指令详细使用及其区别&实例属性][Link 1]  
[三、组件与组件的拆分][Link 2]  
[四、Vue组件之 d i s p a t c h 和 dispatch和 dispatch和broadcast][Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]  
[五、vue组件之祖孙传后代provide和inject][vue_provide_inject]  
[六、Vue组件之详细理解并使用props和$emit()  
][Vue_props_emit_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220127/9ce9ac4458ca47c5a10f9c72b711a7c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20220127/dfe02ac63a7348a99913e9102549f377.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]: /images/20220127/82d474b8070e4c019b7672dd6785ab48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]: /images/20220127/dfa3f55f1952450fa6496614009669bb.png
[vue]: https://blog.csdn.net/Sunday97/article/details/90413669?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008429819724839855179%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008429819724839855179&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-2-90413669.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 1]: https://blog.csdn.net/Sunday97/article/details/90447521?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-3-90447521.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 2]: https://blog.csdn.net/Sunday97/article/details/90578330?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-1-90578330.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]: https://blog.csdn.net/Sunday97/article/details/91443685?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-6-91443685.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[vue_provide_inject]: https://blog.csdn.net/Sunday97/article/details/91358599?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-7-91358599.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_props_emit_]: https://blog.csdn.net/Sunday97/article/details/91356575?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-8-91356575.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187