码迷,mamicode.com
首页 > 其他好文 > 详细

使用vue-cli脚手架创建Vue项目

时间:2020-03-14 17:03:43      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:浏览器   构建项目   构建   web   ref   code   参考   bpa   href   

安装Node.js和npm

请参考Win10环境安装node.js和npm

安装Vue CLI脚手架

安装方法

点击开始 => 运行 => 输入"cmd" => 执行以下命令:
npm install -g @vue/cli

以前是这样安装的:npm install -g vue-cli
新版本的Vue CLI的包名称由vue-cli改成了@vue/cli

检查是否安装成功

vue --version

技术图片

安装webpack

安装方法

npm install -g webpack

技术图片

构建项目

先进入到自己的workspace:cd C:\workspace\workspace_vscode
再执行构建项目命令:vue init webpack <项目名>

技术图片

然后报错了,需要先安装@vue/cli-init

技术图片

再重新构建,一直卡在这一步了。
技术图片

ctrl c终止操作。这里我使用的npm源是淘宝镜像(https://registry.npm.taobao.org),于是我把它换回原来的(https://registry.npmjs.org):
npm config set registry https://registry.npmjs.org
再执行就成功了。

技术图片

因为刚才把npm源换回去了,如果直接用npm install,速度会很慢,所以这里选择不使用npm,我们自己来搞。

安装项目所需的依赖包资源

先进到项目目录:cd <项目目录>
然后把npm源换成淘宝镜像,再执行npm install 或者 直接使用cnpm install

技术图片

技术图片

运行项目

npm run dev

技术图片

访问项目

用浏览器访问http://localhost:8080

技术图片

停止运行项目

ctrl c

使用vue-cli脚手架创建Vue项目

标签:浏览器   构建项目   构建   web   ref   code   参考   bpa   href   

原文地址:https://www.cnblogs.com/minxiang-luo/p/12492380.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!