从零开始自学vue3笔记（一）：搭建步骤

拼搏现实的明天。 2024-04-08 13:25 73阅读 0赞

## 一、下载node.js ##

本人下载了v12.16.3版本的msi（省的自己配置环境变量了）  
官网：`https://nodejs.org/en/`

安装后，可以用`node -v`、`npm -v`查看是否安装成功。

## 二、如果需要，可以设置修改下载源 ##

//查看下载源
    npm config get registry
    
    //设置为淘宝源
    npm config set registry https://registry.npm.taobao.org

## 三、如果需要，可以设置代理 ##

//查看下载代理(默认是空的)
    npm config get proxy
    npm config get https_proxy
    
    //删除下载代理（如果配置错了，可以删掉，因为默认是空的，所以删掉也没事）
    npm config delete proxy
    npm config delete https_proxy
    
    //设置下载代理
    npm config set proxy http://123.123.123.123/
    npm config set https_proxy http://123.123.123.123/

## 四、全局安装vue-cli ##

//安装命令
    npm install -g @vue/cli
    
    //安装后，可以用这个查看版本，查看是否安装成功
    vue --version

## 五、下载vue项目模板 ##

进入到你想要创建项目的路径，执行：

vue create myvue

之后，可以选择下载vue2还是vue3的模板。  
会在当前路径下创建`myvue`文件夹，其中就是项目模板。

## 六、下载node\_modules ##

进入`myvue`文件夹，执行命令：

npm i

会把项目需要的相关`node_modules`依赖，下载到`node_modules`文件夹中。

## 七、启动项目 ##

命令为：

npm run serve

执行后，如果没有问题，就可以启动项目，启动后的默认页面为：

http://localhost:8080/

## 八、项目打包 ##

命令为：

npm run build

执行后，会在项目文件夹中生成一个`dist`文件夹，其中就是打包好的前端项目；  
前端发版时，一般是把`dist`中的内容、放到`nginx服务器`的`指定文件夹`中。  
(本地自己调试时会启动前端项目，npm run serve，不过测试或生产环境，一般不用启动前端项目，而是用nginx)

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关从零开始自学vue3笔记（三）：vue文件格式简要说明

以本人写的一个vue抽奖页面为例： <template> <div id="indexDiv"> <div id="header">

一时失言乱红尘/ 2024年04月08日 13:29/ 0 赞/ 68 阅读

相关从零开始自学vue3笔记（二）：项目结构与启动顺序

![在这里插入图片描述][800a2ea724e34c92a1fe3cffc3aec6eb.png] 一、dist文件夹这个文件夹中，一般是执行`npm run bu

偏执的太偏执、/ 2024年04月08日 13:26/ 0 赞/ 69 阅读

相关从零开始自学vue3笔记（一）：搭建步骤

一、下载node.js 本人下载了v12.16.3版本的msi（省的自己配置环境变量了）官网：`https://nodejs.org/en/` 安装后，可以用`n

拼搏现实的明天。/ 2024年04月08日 13:25/ 0 赞/ 74 阅读

相关从零开始快速搭建一个vue项目

一、环境准备 node.js [node官网链接][node] 检查是否安装node.js,若未安装则去官网下载，安装完成后，在系统设置中配置node的环境变量，

﹏ヽ暗。殇╰゛Y/ 2024年03月22日 20:36/ 0 赞/ 114 阅读

相关从零开始搭建SpringCloud Alibaba

从零开始搭建SpringCloud Alibaba SpringCloud Alibaba Spring Cloud Alibaba 致力于提供微服务开发的一站式解

青旅半醒/ 2022年12月17日 07:23/ 0 赞/ 309 阅读

相关从零开始搭建前端脚手架搭建

需要的功能一、具备问询功能，可以获取定制化信息。二、根据问询结果，以不同模板去创建项目。核心原理一、本质是从远程仓库把不同的模板拉取到本地。 1、

本是古典何须时尚/ 2022年12月17日 07:10/ 0 赞/ 357 阅读

相关 Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）

VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vu

太过爱你忘了你带给我的痛/ 2022年05月15日 02:49/ 0 赞/ 607 阅读

相关 Vue2.0 从零开始_环境搭建操作步骤

一、什么是VUE？是一种node.js框架，特点如下: 1.数据绑定（特性：双向绑定；一旦发生变化，Dom节点实时更新；PS:尽量抛弃JQ，次特点已经可以解决很多特效等

青旅半醒/ 2022年03月25日 10:12/ 0 赞/ 291 阅读

相关 vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架（渐进式框架）。 Vue两大核心思想：组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用；数据驱动是前端的

迷南。/ 2021年11月15日 12:52/ 0 赞/ 447 阅读

相关从零开始搭建一个vue.js的脚手架

本文章来自装载 https://blog.csdn.net/qq\_32347235/article/details/58134723 从零开始搭建一个vue.js的脚

太过爱你忘了你带给我的痛/ 2021年09月15日 14:12/ 0 赞/ 433 阅读