Vue CLI

最新推荐文章于 2023-10-18 12:01:46 发布

almostall

最新推荐文章于 2023-10-18 12:01:46 发布

阅读量84

点赞数

分类专栏： Vue知识点

本文链接：https://blog.csdn.net/weixin_45364670/article/details/118852499

版权

Vue知识点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue CLI

Command-Line Interface,命令行界面，俗称脚手架。使用vue-cli可以快速搭建Vue开发环境以及webpack配置.

Vue脚手架使用前提：Node，Webpack.

使用

1.全局安装Vue脚手架：npm install -g @vue/cli（国内可以使用淘宝npm镜像使用cnpm代替npm。命令：npm install -g cnpm --registry=https://registry.npm.taobao.org ）

2.步骤1默认安装的是脚手架1，所以要使用脚手架2的话需要拉取脚手架2模板：npm install -g @vue/cli-init

3.Vue ClI2初始化项目：vue init webpack my-project；Vue ClI3及以上初始化项目：vue create my-project

4.新建项目时一些选项：Project name(项目名称),Project description(项目描述),Author(作者),vue-router(vue全家桶有：VueCore+vue-router+vuex),ESLint(代码规范)，unit tests(单元测试)，e2e tests(end to end tests ,端到端测试)

注意：开发时使用runtime-only，性能更高且代码量更少。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g2yJchXb-1626486957366)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20201110111839078.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ti0cxunM-1626486957368)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20201110111904433.png)]$

Vue CLI2详解

创建项目选项详解

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukKeynow-1626486957371)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20210426211154259.png)]$

目录详解

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJVJKbEc-1626486957373)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20210426215739917.png)]$

run-time-complier和run-time-only的区别

run-time-complier：template->ast(虚拟语法树)->render->virsual-dom->真实dom(UI)

run-time-only：render->vdom->UI

1.run-time-only性能更高。2.run-time-only需要的源代码量更少

更多时候选择run-time-only

npm run dev和npm run build执行过程

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYdztQu3-1626486957374)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20210428103015527.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8mROmIuS-1626486957375)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20210428103038859.png)]$

vue3的配置文件修改：1.通过vue ui图形话界面修改。2.在项目目录下新建vue.config.js文件（moudle.exports={}来修改或添加一些配置）3.通过以下目录查看相关配置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TVgCnOrg-1626486957376)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20210508164506984.png)]$

补充：箭头函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gS0GQTHF-1626486957378)(C:\Users\小机灵鬼\AppData\Roaming\Typora\typora-user-images\image-20210508172426425.png)]$

almostall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue CLI

Vue CLICommand-Line Interface,命令行界面，俗称脚手架。使用vue-cli可以快速搭建Vue开发环境以及webpack配置.Vue脚手架使用前提：Node，Webpack.使用1.全局安装Vue脚手架：npm install -g @vue/cli（国内可以使用淘宝npm镜像使用cnpm代替npm。命令：npm install -g cnpm --registry=https://registry.npm.taobao.org ）2.步骤1默认安装的是脚手架1，所以
复制链接

扫一扫