Window中安装none.js搭建Vue.js开发环境

本文详细介绍如何使用Node.js和Vue CLI快速搭建Vue项目。包括安装Node.js、配置cnpm国内镜像、使用Vue CLI创建项目、配置Webpack等步骤。

安装node 

进入node官网下载安装包,官网地址:https://nodejs.org/en/download/current/

下载好后只需要进行傻瓜式安装即可使用

输入cmd命令测试是否安装成功

  1. 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm
  2. Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org

  3.  安装vue-cli脚手架构建工具

  4. 至此,我们需要的环境及工具已经准备好了。

    接下来,我们使用vue-cli来构建项目。

  5. 首先,我们先选择进入到e我们的工作目录为 E:\个人\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。
  6. 在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。
  7. 安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录firstVue,如下图。

  8.  

  9.  主要用的包都在package.json中,如下图

  10.  

     

  11.  cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)

  12.  

  13. 安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源

  14.  

  15. 安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

  16.  

  17.  

  18. 如果启动过程中出现下方问题,只需要将config目录下的index.js文件中dev端口由8080改为8088

  19.  



原文转载:https://www.cnblogs.com/RexSheng/articles/6934413.html

Windows系统上安装Vue可以按照以下步骤进行操作: 1. 首先,确保你已经安装Node.js。你可以在命令行中输入`node -v`来检查是否已经安装。如果没有安装,你可以从Node.js官方网站下载并安装最新版本。 2. 打开命令行工具,输入以下命令来安装Vue CLI(Vue的命令行工具): ``` npm install -g @vue/cli ``` 这个命令会全局安装Vue CLI,使你可以在任何地方使用`vue`命令。 3. 安装完成后,你可以通过输入`vue --version`来检查是否安装成功。如果成功安装,你会看到Vue CLI的版本号。 4. 接下来,你可以使用Vue CLI创建一个新的Vue项目。在命令行中进入你想要创建项目的目录,然后输入以下命令: ``` vue create 项目名称 ``` 其中,`项目名称`是你想要给项目起的名字。这个命令会创建一个新的Vue项目,并自动安装所需的依赖。 5. 安装完成后,进入项目目录: ``` cd 项目名称 ``` 6. 最后,你可以使用以下命令来启动开发服务器: ``` npm run serve ``` 这个命令会启动一个本地开发服务器,并在浏览器中打开你的Vue应用。 这样,你就成功在Windows上安装Vue。希望对你有帮助!\[1\] #### 引用[.reference_title] - *1* *3* [vue入门--Windows下安装vue环境](https://blog.csdn.net/weixin_45333934/article/details/106036840)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在Windows下搭建Vue开发环境](https://blog.csdn.net/weixin_45899210/article/details/124107405)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值