位置: IT常识 - 正文
推荐整理分享Vue.js安装与创建默认项目(详细步骤)(vue.js如何安装),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:怎么安装vue.js,vue.js 安装,vue.js创建项目,vue.js部署,vue.js创建项目,vue.js如何安装,vue.js环境搭建,vue.js环境搭建,内容如对您有帮助,希望把文章链接给更多的朋友!
前言
上一篇博文已经对Node.js的安装与配置进行了详细介绍,详见https://blog.csdn.net/qq_42006801/article/details/124830995
另外:文中项目存放的路径及项目名称可根据自身实际情况进行更改。
一、Vue.js简述Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
二、搭建Vue脚手架1. 直接用 <script>标签引入直接下载并用<script>标签引入,Vue 会被注册为一个全局变量。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2. 通过NPM安装Vue在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
2.1 安装Vue脚手架
在Cmd命令行窗口中输入如下命令安装Vue脚手架。
npm install @vue/cli -g或者
cnpm install @vue/cli -g当然前提是已安装配置了npm或者cnpm,如未安装可见博文:Node.js安装与配置(详细步骤)
执行cnpm install @vue/cli -g后如下图所示: 2.2 查看安装的Vue版本
cmd命令行窗口输入vue -V查看@vue/cli是否安装成功
vue -V如下图所示,vue脚手架即安装成功
三、安装webpack及webpack-cli1.安装webpack由于webpack5及以上的版本变动较大,所以如果是采用vue3创建vue项目,用webpack4的版本更能互相的兼容。此处安装webpack@4.42.0版本,命令如下:
cnpm install webpack@4.42.0 -g安装成功后,cmd命令行窗口如下图所示:
2.安装webpack-cli另外:由于webpack的版本需要webpack-cli一起配合使用,执行如下命令安装webpack-cli:
cnpm install webpack-cli -g安装成功后,cmd命令行窗口如下图所示:
3.检查是否安装成功cmd命令行窗口输入如下命令:
webpack -v如下图所示,webpack和webpack-cli已经安装成功。
四、新建一个默认的Vue项目1.创建项目首先进入【E:\codes\web】路径下(此处创建在E:\codes\web下,请根据自身实际情况更改),然后进入此文件夹的cmd命令行窗口。 执行如下命令创建一个名为【hello-vue】的Vue项目:
vue create hello-vue点击回车后,会自动下载所需文件(包括node_modules),创建成功后如下图所示:
2.启动项目首先进入【E:\codes\web\hello-vue】文件夹,然后进入此文件夹的cmd命令行窗口 执行如下指令运行该项目:
npm run serve如上图项目启动成功,在浏览器打开http://localhost:8080/进行访问,效果如下图所示:
写在最后
上一篇:做毕业设计,前端部分你需要掌握的6个核心技能(做毕业设计,前景如何)
下一篇:Python+chatGPT编程5分钟快速上手,强烈推荐!!!(python编程100例)
友情链接: 武汉网站建设