手把手教你使用vue-cli脚手架(图文解析)(2)

  • 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查看版本号,出现相应得到版本号即为成功:

    查看vue-cli是否安装成功

    注:这里是大写的V

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

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

    1。新建一个vuetext(项目名)文件夹来放置项目,在新建文件夹的上一级文件夹右键打开命令行工具,输入命令行:

    vue init webpack vuetext1(项目名)

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

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

    内容版权声明:除非注明,否则皆为本站原创文章。

    转载注明出处:http://www.heiqu.com/801.html