vue脚手架的使用

时间:2022-02-17 15:31:30

npm install -g @vue/cli    --全局环境安装vue/cli

vue create <project-name>

在创建项目时你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

vue脚手架的使用

在多选时,空格代表选中,enter代表进入下一个配置项

且你手动选择的配置项还会存入到你电脑的 ~/.vuerc (C:\Users\Admin)文件中,这样子你下次创建vue项目的时候,可以选择你之前手动配置的配置,这点vue cli3做得很人性化。上面的配置选择完之后,一个简单的vue项目就创建成功了。这个时候你在命令行cd hello-world,进入到hello-world项目根路径下,命令行敲下npm run serve,项目就开始跑起来啦。

关于npm install的作用:

1. 为了在开发过程中,安装功能模块的方便,产生了npm包管理器。

在git clone项目的时候,项目文件中并没有 node_modules文件夹。

为什么呢?

我们知道这个文件中保存的是我们项目开发中所使用的依赖模块。这个文件夹可能有几百兆大小,如果放到github上,其它人clone的时候会非常慢,这个时候就想到用一个package.json依赖配置文件解决这个问题。

这样每个人下载这个项目的时候,只需要进入该项目目录 直接npm install npm就会到里面去找需要的函数库,也就是依赖。

例如package.json里有一段

"dependencies": {"vue": "2.5.17","vue-router": "3.0.2", "element-ui": "2.4.6",},

那么npm install就会读取dependencies中的模块,下载这些模块文件。

那么这些依赖会放在什么地方呢?我们在哪里能找到这些依赖文件呢?

npm install执行完以后,我们会发现在项目下多了一个 node_modules文件夹。我们安装的依赖文件都可以在这里面找到哦~。

2. npm install ...和npm install 有哪些区别呢

npm install <...> 只下载依赖模块,package.json中dependencies并没有改变。

npm install <...> --save 会自动往 package.json中"dependencies" 添加xxx属性。

npm install <...> --save -dev 自动往package.json中"devdependencies" 添加xxx属性。

注:

dependencies:生产环境需要依赖的库

devdependencies:只有开发环境下需要依赖的库