搭建Vue开发环境新手教程

拾忆
2020-07-27 / 0 评论 / 207 阅读 / 正在检测是否收录...

请输入图片描述

安装Node

Vue项目的搭建需要用到Node,所以这里先安装Node
官网链接:https://nodejs.org/en/ -推荐安装最新版本

安装的步骤很简单,这里就不演示了

安装完后打开终端输入 node -v,如果出来对应的版本号则表示安装成功.

安装node检查

再看看npm,打开终端输入 npm -v

安装npm检查

这两个都出来后就代表真的安装成功了

安装Vue

打开终端输入 npm install vue,开始安装vue
至于说为什么这么装,请看官网解释:
https://cn.vuejs.org/v2/guide/installation.html#NPM

安装完后打开终端输入 vue --version

看到版本后代表安装成功,当前最新版本号为3.10.0

安装Vue

接下来安装 vue-cli,这是vue 的一个脚手架,更多的解释请看官方文档:https://cli.vuejs.org/zh/guide/prototyping.html
打开终端输入 npm install -g @vue/cli-service-global 看到下图这些字样就代表安装成功了

Vue脚手架安装

搭建项目

进入D盘(随便你进入哪),打开终端,输入 vue create vue-hello,意思是创建一个项目名为 vue-hello 的vue项目,这里也带上官网的介绍:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

输入命令后会让你选择需要用的依赖

搭建项目(1)

  • default (babel,eslint) 这个是默认选择所有依赖 嫌麻烦就直接选这个
  • Manually select features 这个是选择部分依赖 我是选择这个

箭头指向第二个后按回车出来以下界面

搭建项目(2)

() 里面有 * 的是代表已经选择的,按空格选择相应的依赖,用什么就选什么我这里为了方便就只选 Router

搭建项目(3)

选好之后按回车 提示你输入 Y/N 你就输入 Y,只有一个 :就直接按回车

搭建项目(4)

这里选 In package.json,因为我不懂另外一个是什么意思

该弄的弄好之后就就他搭建项目了

运行项目

进度条加载完后即可看到以下界面

运行项目

输入最后两条提示的命令

cd vue-hello
npm run serve

看到这个界面就代码启动成功了

项目启动完成

访问地址 http://localhost:8081 看到以下页面 说明一个vue项目搭建好了

项目界面

23

评论 (0)

取消