当前位置: 首页 > web>阅读正文

windows下安装vue-cli

2021.9.27 朱丰华 68 次 留下评论 675字

vue-cli全称:Vue-Command Line Interface,即vue命令行接口

Vue-CLI是vue官方提供的脚手架工具

默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

安装Vue-CLI

安装脚手架工具,在cmd中输入如下命令:

npm install -g @vue/cli

注释:需要先安装nodejs

等待安装完毕后,输入如下命令测试是否安装成功

vue --version

如果安装成功,上述命令将显示vue-cli版本号

创建一个vue项目

通过脚手架创建项目,输入如下命令

vue create project-name

此时需要选择一些配置,输入enter,默认选择vue2x然后下一步即可

你需要注意,它默认安装在当前目录下,当然你可以先切换当前所在目录。

创建项目完毕后,进入该目录

cd project-name

接着,使用npm运行

npm run serve

此时,就可以直接在浏览器访问项目了,一般是localhost:8080

如果要退出,连续两次按下ctrl+c即可终止运行。

一般来说,你只需要关注以下2个目录

  • public 目录,存储静态文件或不被webpack支持的第三方库
  • src 目录,存放vue模板文件

在使用更多vue-cli时,你可以先学习webpack更多知识,或参考vuejs.org

例如,你在执行npm run build时,生成的文件可能404,按照vue官网提示中,在项目根目录中新建一个vue.config.js,然后写上

module.exports = {
  publicPath: './'
}

此时,再使用build即可打包出正确的静态页面。

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注