vue cli 全面解析

2020-06-16 05:40:53易采站长站整理

cnpm的同步频率为 10分钟 (新发布的模块有滞后性,同步是需要时间的,等不及的可以使用npm)。
安装cnpm的原因:npm的服务器是外国的,所以有时候我们安装“模块”会很很慢很慢超级慢。
cnpm的作用:淘宝镜像将npm上面的模块同步到国内服务器,提高我们安装模块的时间。
安装完淘宝镜像之后,cnpm和npm命令行皆可使用,二者并不冲突

安装方法:打开命令行工具,输入命令行:


$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm使用方法:


$ cnpm install [name]

安装模块的时候,将npm换成cnpm就行,国内很多coder都是使用cnpm的,个人建议大家都装一下,附上:淘宝镜像网址、

安装webpack

安装方法:打开命令行工具,输入命令行:


npm install webpack -g

安装成功后输入webpack -v,如果出现相应的版本号,则说明安装成功。

安装vue-cli脚手架构建工具

安装方法:全局安装,随便一个文件夹,输入命令行:


npm install vue-cli -g

安装完成之后,输入命令行vue -V查看版本号,出现相应得到版本号即为成功:

注:这里是大写的V

通过vue-cli,初始化vue项目

通过以上几步,将我们安装脚手架所需要的环境和工具都准备好好了,下面就可以使用vue-cli来初始化项目。

1。新建一个vuetext(项目名)文件夹来放置项目,

在新建文件夹的上一级文件夹右键打开命令行工具,输入命令行:


vue init webpack vuetext1(项目名)

注:项目名不能大写,不能使用中文

解释一下这个命令,这个命令的意思是初始化一个vue项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中vuetext1是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。

2。以下是脚手架安装过程(安装步骤解析在图片下面)

vue-cli初始化项目选项配置详细解析


$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令
Target directory exists. Continue? (Y/n) y--------------------找到了vuetext1这个目录是否要继续