首页 > 系统相关 >最新windows10 下搭建vue开发环境

最新windows10 下搭建vue开发环境

时间:2023-07-04 09:44:17浏览次数:56  
标签:npm node vue cnpm nodejs windows10 安装 搭建

特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:

 

详细的安装步骤如下:

一、安装node.js

说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具。

node.js的官方地址为:https://nodejs.org/en/download/,如下图所示:

 根据自己电脑的具体配置,选择你要下载的安装包,我这里选择的是windows 64bit。
        下载完毕,按照windows一般应用程序,运行.msi文件,一路next就可以安装成功,建议不要安装在系统盘C盘。

二、设置global和cache路径

说明:设置路径能够把通过npm安装的模块集中在一起,便于管理。

1、在nodejs的安装目录下,新建node_global和node_cache两个文件夹,作者的安装目录为“D:\Program Files\nodejs\”

2、设置global和cache

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

设置成功后,后续用命令npm install XXX -g安装以后模块就在D:\Program Files\nodejs\node_global\node_modules里

三、安装cnpm

说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装“中国的npm”——cnpm

参考网址如下:http://npm.taobao.org/

安装命令为:

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

四、设置环境变量(非常重要)

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。

 2、点击环境变量弹出下列对话框:

 

3、修改用户变量PATH:

选中PATH,点击编辑,在已有的变量后面,加入英文的";",然后把“D:\Program Files\nodejs\node_global”加到后面

 

4、新增系统变量NODE_PATH:

在下面的系统变量中点击新建,弹出下框,把变量值设置成“D:\Program Files\nodejs\node_global\node_modules”

 

第四第五步,要先进入你要安装的项目文件夹下

四、用cnpm安装vue

cnpm install vue -g

五、安装vue命令行工具

cnpm install vue-cli -g

六、安装init依赖 npm install -g @vue/cli-init ,安装即可。

七、创建工程

1、用cd命令来到你将要新建工程的目录,如“C:\Users\Administrator\Desktop\birdhelper>”

创建一个基于 webpack 模板的新项目,工程名为birdhelper。

1、vue init webpack mytest,具体步骤如下图所示:

 2、初始化完成后的目录结构如下:

 

3、定位到mytest的工程目录下

cd mytest

4、安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules

cnpm install

 

5、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

cnpm run dev

 

 

6、构建该项目的命令如下

cnpm run build

 

 

将dist文件夹拷贝出来,放到服务器的发布目录,在浏览器中输入设置的本机ip和端口进行访问即可。Good Luck, guys!

至此,我们已经在win10下搭建成功了vue,并能和服务器进行集成。

 

 

如果你从GitHub上新下载了一个项目,项目中可能会缺少一个名为node_modules的文件夹,要想让它运行,必须

1.进入项目文件下

2.npm install

3.npm run build

4.npm install npm-cli

5.npm run dev

下次再运行的时候,只需进入项目,再npm run dev即可

 

标签:npm,node,vue,cnpm,nodejs,windows10,安装,搭建
From: https://www.cnblogs.com/nszblogs/p/17524834.html

相关文章

  • 前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广
    前端Vue自定义精美上下滚动通告栏组件常用于展示公告信息上下滚动跑马灯上下滚动广播,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13318效果图如下:cc-noticeBar使用方法<!--默认颜色#333公告栏--><viewclass="header">默认颜色......
  • 前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目
    前端Vue自定义精美悬浮菜单按钮fabbutton可设置按钮背景颜色菜单按钮展开条目,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13321效果图如下:cc-suspensionMenu使用方法<!--scrollShow:是否显示滑动到顶悬浮按钮 color:悬浮按钮背......
  • 关闭vue项目中Uncaught runtime errors弹窗页面
    看控制台发现有webpack类名,应该是webpack搞出来的解決办法再vue.config.js中添加以下配置:module.exports=defineConfig({ ... devServer:{client:{overlay:false}}})......
  • 前端Vue自定义精美宫格菜单按钮组件 可设置一行展示个数 可设置成九宫格 十二宫格 十
    前端Vue自定义精美宫格菜单按钮组件可设置一行展示个数可设置成九宫格十二宫格十五宫格,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13315效果图如下:cc-categoryMenu使用方法<viewclass="header">十五宫格菜单</view><!--推荐宫......
  • Vue3学习-01_前端工程化与webpack
    背景最近在学习Vue知识,参照的教程是黑马程序员官网提供的免费前端教程,这里记录一下自己的学习笔记以及遇到的相关问题。前端工程化的概念及优点前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上,就是实......
  • vue项目中的package.json的private选项的作用
    {"name":"项目名称","description":"描述","version":"版本","private":true,"author":"testTeam","license":"MIT",}如果你在你的package.j......
  • keepalived高可用服务搭建——单实例
    准备四台机器hostnameIP说明lb0110.0.0.30keepalived主服务器(nginx主负载均衡)lb0210.0.0.60Keepalived备服务器(Nginx辅负载均衡)www0110.0.0.40www01www0210.0.0.50www02安装keepalived(lb01,lb02)[root@lb01~]#yuminstallkeepalived-y[roo......
  • day05--23.7.3JDK、JRE、JVM以及开发环境搭建
    JDK、JRE、JVMJDK:JavaDevelopmentKit--JAVA开发者工具--用于程序开发java--编译运行javajavac--编译运行javajavadoc--java生成文档jar--java打包成应用JRE:JavaRuntimeEnvironment--JAVA运行时环境appletlibrariesJVM:JavaVirtualMachine--JAVA虚拟机java开发......
  • CSharp的@microsoft/signalr实时通信教程 - 前端 vue
    1.安装@microsoft/signalrpnpminstall@microsoft/signalr--save2.封装组件jsimport*assignalRfrom'@microsoft/signalr'exportfunctionSignalR(){const_signalR={connection:null,connectionStatus:false,build(url){consol......
  • 编程开发 --- vue是什么
    只面向视图层的html模板引擎只面向视图层指的是可以在浏览器独立运行且只关注视图。模板引擎指的是使得html具备完备编程语言的特性。比如if语句 Vue是一种用于构建用户界面的渐进式JavaScript框架。它是一个开源项目,由尤雨溪(EvanYou)开发,并得到了广泛的社区支持和贡献。Vue......