用文字记录生活,留下美好瞬间
原创

使用CLI脚手架搭建Vue项目

共 1,301 字,需阅读 3 分钟
2019/09/01 下午
361 次阅读

#安装Node.js环境

Vue CLI基于Node.js运行,因此首先确保你的系统中已安装了Node.js。访问 Node.js官方网站 下载并安装适合你操作系统的最新LTS版本。安装完成后,在命令行中输入以下命令检查Node.jsnpm(Node包管理器)是否安装成功:

          
  • 1
  • 2
node -v npm -v

这两个命令分别会输出Node.jsnpm的当前版本号。

版本
版本

当然你可以通过 nvm 来对node进行管理,然后通过 nvm 切换版本,请看这篇文章 nvm的切换node版本

#安装Vue CLI

接下来,你需要全局安装Vue CLI脚手架,在命令行中执行以下命令:

          
  • 1
npm install -g @vue/cli@4

安装完成后,你可以通过vue --version命令查看Vue CLI的版本

Vue Cli版本
Vue Cli版本

#创建Vue项目

Vue CLI 4.x允许你在创建项目时选择Vue 2或Vue 3。现在,我们将通过Vue CLI创建一个Vue 2项目。在命令行中输入以下命令:

          
  • 1
vue create demo

这里,demo是你的项目名称,在接下来的步骤中,Vue CLI会询问你关于项目配置的一系列问题,包括选择预设、特性等。对于初学者,选择默认预设(default)即可,它已经包含了开发和生产的基本配置。如果你对Vue有一定了解,也可以选择手动选择特性(Manually select features)来自定义你的项目配置。

创建项目
创建项目

#进入项目目录并启动开发服务器

项目创建完成后,通过以下命令进入项目目录:

          
  • 1
cd demo

然后,启动开发服务器,以便在本地查看和调试你的应用:

          
  • 1
npm run serve

这将在默认浏览器中自动打开你的应用,地址通常是http://localhost:8080/。此时,你可以开始编写代码并实时查看更改效果了。

运行
运行

你可以使用npm run build命令来构建生产版本的应用。构建完成后,应用将生成在dist目录中。

完!

本文于2019/09/01 下午发布在秘阁
#Vue
自由转载 - 署名 - 非商业性使用
https://zhangwurui.cn/article/60
0/0条看法
访客身份
在下有一拙见,不知...
期待你的捷足先登