使用vue脚手架快速创建vue项目(入门)

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.安装环境

为了方便，以下操作大多数中命令行中运行，window可以用cmd,powershell,gitbash等。

  • 安装node.js

    打开它的官网，或者中文网站，然后直接下载就可以了，然后跟安装普通的应用一样，直接安装就好了。

  • 查看node和npm的版本

    直接用命令行分别运行下边命令，出现如图，就说明安装完成

node -v
npm -v

npm的服务器在国外，为了方便，建设安装cnpm

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

  • 安装vue-cli

    打开它的官网，可以快速地安装，直接运行下边命令。如果是mac或者linux，因为有参数-g，所以在命令前加上sudo 或使用su安装

cnpm install -g @vue/cli
或
npm install -g @vue/cli

2.搭建项目

  • 创建一个文件夹，用来存放我们的所有项目，也就是你的工作空间，这个路径完全自定义，随便一个文件夹都行，然后使用命令行进入到这个文件夹下。在windows下，可以按住shift，然后点击鼠标右键，就可以打开

  • 使用脚手架创建项目,运行下边命令, 后边的//是注释，复制命令时不要复制

vue create vuecli-demo  //vuecli-demo是你的项目名,这句命令执行时会有一些选择项，不用管，一直回车，这些具体的设置项在vue cli的官网都有说明

这个命令执行完成后，会在你的工作空间中创建一个名为vuecli-demo的文件夹，里边就是你的项目

如果这个命令长时间卡住不动时，按ctrl+c取消，然后删除 刚才创建的这个文件夹，重新执行上边命令

  • 然后它会给你两个命令，依次执行图中这两个命令

    这时会编译你的项目，然后自动启动服务。

最后在浏览器中打开
http://localhost:8080/

以上是 使用vue脚手架快速创建vue项目(入门) 的全部内容， 来源链接： utcz.com/z/378888.html

回到顶部