隐藏

win10下安装vue环境及搭建

发布:2023/12/7 15:28:46作者:大数据 来源:大数据 浏览次数:527

一,Vue.js简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
本文的主要内容是如何在windows10环境下正确安装Vue.js并运行项目。

二,安装的node.js

访问node.js官网https://nodejs.org/en/,下载最新版本node,根据提示安装。
安装成功之后,通过运行打开命令行程序的cmd.exe,输入命令

node -v

安装成功之后,通过运行打开命令行程序的cmd.exe,输入命令若安装成功,则会显示对应版本号。

在下载的node.js的的同时,计算机会安装npm包管理器,输入命令

npm -v

若安装成功,会显示出npm的版本信息

三,安装cnpm

由于使用npm安装插件是从国外服务器上获取的,国内使用会出现下载速度较慢,下载失败等问题,因此我们可以使用npm的国内镜像--cnpm。
在cmd.exe中输入命令

npm install cnpm -g --registry = https://registry.npm.taobao.org

等待安装完成,我们就可以使用cnpm代替npm管理安装包了。
关于cnpm,若想了解更多,请访问淘宝团队官方网址http://npm.taobao.org

四,安装Vue-cli

在cmd.exe中输入命令

npm install -g vue-cli

等待完成

五,构建项目

在CMD.EXE中将目录移动至选定目录,即项目创建的位置。
在选定目录下输入命令vue init webpack

vue init webpack Vue//Vue为项目文件夹的名称

在选定目录下输入命令之后按照提示输入项目名称,描述,作者等信息。
创建的项目文件夹如图所示

六,运行项目

将位置移动至项目目录,输入命令

npm install
npm run dev

等待加载完成,打开浏览器,输入localhost:8080,若运行成功,则会显示以下页面


---------------------
作者:冰水zzy
来源:CSDN
原文:https://blog.csdn.net/zzy123654321/article/details/79191331
版权声明:本文为博主原创文章,转载请附上博文链接!

用 Vue.js 2.x 与相配套的 Vue Router、Vuex 搭建了一个最基本的后台管理系统的骨架。

当然先要安装 node.js(包括了 npm)、vue-cli

项目结构如图所示:

assets 中是静态资源,components 中是组件(以 .vue 为后缀名的文件),store 中是使用了 vuex 的 js 文件。

声明:本站内容来源于原创和互联网,尊重作者版权,转载请注明来源网址,欢迎收藏,谢谢!