笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了,

偶尔心血来潮想试着自己搭建一个vue项目

 

我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好了node和npm

如果你还没安装这些东西,就先去安装再来学习搭建vue项目吧

一、安装vue-cli

1. 开启命令行,输入指令(Windows的命令行开启方法为  键盘上的 开始键 + R 同时按下,然后输入 cmd 就能打开命令行了)

npm install --global vue-cli  (--global全局安装)

那如果安装好了我们怎么查看的到是否已经安装好了呢?

其实已经在我们本地了

本地路径为  C:\Users\Administrator\AppData\Roaming\npm 

里面的文件大概长这个样子

2020最新教你如何搭建vue项目

那么vue-cli我们就安装好了

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

二、创建自己的项目

1. 随便找一个文件夹(这里我以桌面 test文件夹 为例)

在cmd中进入到该文件夹

2020最新教你如何搭建vue项目

我这里呢  使用的进入命令(cd)  一步一步进入到桌面test文件夹的

你也可以在命令行中  拖入文件夹   这样就可以直接进入到该文件夹

然后输入命令

vue init webpack vue项目   (“vue项目” 是我项目的名称,你也可以换一个名称)

之后呢,cmd就会对你提问,我直接把回答好的图放出来吧

 2020最新教你如何搭建vue项目

 

 

等待它下载完成,就好了

 

 

我们就可以去到文件夹里面查看项目了

2020最新教你如何搭建vue项目

 

 

 

之后我们的运行指令是

npm run dev

一个简单的vue项目就搭建好了

注意一个细节,安装了旧版本记得用我上面教的先卸载

 收藏的一个关于创建vue,及开发vue项目到部署的全过程网址https://cli.vuejs.org/zh/guide/prototyping.html

https://www.jianshu.com/p/1ee1c410dc67

相关文章:

  • 2018-12-06
  • 2021-11-02
  • 2021-12-18
  • 2020-02-20
  • 2020-07-20
  • 2019-03-22
  • 2019-03-27
猜你喜欢
  • 2017-12-15
  • 2021-12-09
  • 2019-03-30
  • 2019-03-12
  • 2021-12-15
  • 2019-10-28
  • 2022-01-02
  • 2021-11-04
相关资源
相似解决方案