图解使用vue-cli创建Vuejs项目

2025-06-07 00:33:04

1、首先从官方网站下载安装Node.js,建议使用6.x版本,同时也会一并安装npm工具,npm>3.10以上。

2、npm安装很慢(国外服务器),所以一般推荐使用npm淘宝镜像cnpm,先安装下cnpm:npm i荏鱿胫协nstall -g cnpm --registry=https://registry.npm.taobao.org安装好cnpm后,以后使用npm的地方就可以使用cnpm替代了。

3、全局安装vue-cli,如下图所示:cnpm install -g vue-cli

图解使用vue-cli创建Vuejs项目

4、在任意一个盘创建一个vue文件夹方便存放,我是在D盘下创建,然后切换到这个文件夹下,如下图所示:

图解使用vue-cli创建Vuejs项目

5、创建一个webpack项目例如:rss2,如下图所示:vue init webpack rss2

图解使用vue-cli创建Vuejs项目

6、一路回车确认,遇到选(y/n)基本上选y,如下图所示:到最后在D盘vue文件夹下面就会有初始化的项目rss2

图解使用vue-cli创建Vuejs项目

7、进入项目rss2文件里,如下图所示:cd rss2

图解使用vue-cli创建Vuejs项目

8、安装依赖,如下图所示:

图解使用vue-cli创建Vuejs项目

9、运行项目,如下图所示:

图解使用vue-cli创建Vuejs项目

10、这一行命令代表着它会喉哆碓飙去找到package.json的scripts对象,执行node bulid/dev-server.js。之后自动打开默认浏览器,如下图所示:

图解使用vue-cli创建Vuejs项目

11、使用vue-cli创建项目到此结束。如果要终止命令行操作: ctrl+c。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢