240
正在加载今日诗词....

使用vue脚手架快速创建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取消,然后删除 刚才创建的这个文件夹,重新执行上边命令

  • 然后它会给你两个命令,依次执行图中这两个命令
    title
    这时会编译你的项目,然后自动启动服务。
    title

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

posted @ 2019-12-04 23:49  小鱼吃猫  阅读(8621)  评论(0编辑  收藏  举报