vue安装步骤（详细版）

已于 2024-01-24 18:49:25 修改
阅读量1w 收藏 36
点赞数 10
文章标签： vue.js 前端 javascript
于 2023-09-20 21:51:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64255870/article/details/133101603
版权

目录

一、安装node.js 环境

1.安装完成后验证node.js 是否安装成功

在这里插入图片描述

2.环境变量配置

在这里插入图片描述

更改npm的全局安装路径（在cmd中执行）
命令行输入：
npm config set prefix “D:\nodejs\node_global”

命令行输入：
npm config set cache “D:\nodejs\node_cache”

查看npm的本地仓库:
npm list -global

！！配置环境变量

系统变量：

在这里插入图片描述

用户变量：

在这里插入图片描述

二、安装淘宝镜像(cnpm)

安装命令: npm install cnpm -g --registry=https://registry.npm.taobao.org

在这里插入图片描述

安装成功！！

三、安装全局vue

执行命令:npm install -g vue

在这里插入图片描述

安装成功！！

四、安装 vue脚手架

1.安装vue.js

安装命令：cnpm install vue -g/npm install @vue/cli –g(新版本)

2.安装webpack模板

安装命令：npm install webpack -g

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：npm install --global webpack-cli

在这里插入图片描述

安装成功！！

3.安装脚手架vue-cli

安装命令：npm install vue-cli -g

用这个命令来检查其版本是否正确：vue --version或vue -V

在这里插入图片描述

顺手安装上vue-router

安装命令：npm install -g vue-router

五、创建vue项目（初始化一个vue项目工程）

ps：需要安装git

vue init webpack 项目名/vue create 项目名(新版本)[解决乱码【chcp 65001】

1.vue init webpack 项目名

在这里插入图片描述

安装依赖（例如echarts、axios）
npm install echarts -S
npm install vue-axios -S

在这里插入图片描述

最后结果如下，项目初始化成功

在这里插入图片描述

2、按提示代码进入到项目目录下并运行npm run dev
!!）npm run dev启动过程

在npm run dev的时候，首先会去项目的package.json文件里找scripts 里找对应的 dev ，然后执行 dev 的命令。

npm run dev 执行的就是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令。

在这里插入图片描述

webpack.dev.conf文件通过merge引用了webpack.base.conf.js文件(第七行）。

在这里插入图片描述

在webpack.base.conf.js文件中调用了./src/main.js

在这里插入图片描述

main.js用到了一个html元素#app，并创建了一个vue

在这里插入图片描述

创建的vue会插入到webpack.dev.conf.js配置中HtmlWebpackPlugin配置的文件中

在这里插入图片描述

template指定了index.html作为输出文件的模板文件。

main.js中配置了router-view，router-view会加载HelloWorld.vue并插入到index.html的中，在main.js文件中引用了App.vue和router。

//main.js

img

//router/index.js

router/index.js文件中的路由配置，当访问根目录时就返回@/components/Hello.vue里的内容。

在这里插入图片描述

//App.Vue

App.vue里有个router-view元素，所有通过router返回的vue都会填充在这个元素里面。

在这里插入图片描述

所以最后看到的页面是由App.vue和Hello.vue两个模块组成的。

img

最终结果：

在这里插入图片描述

按提示打开地址http://localhost:8081， 打开网址如图所示

在这里插入图片描述

结束项目运行：ctrl+c，选择Y即可停止项目的运行。

项目打包发布(npm run build)

3.vue create 项目名(3.0版本)

在这里插入图片描述

在这里插入图片描述

配置成功

在这里插入图片描述

运行项目(npm run serve)

在这里插入图片描述

按提示打开地址http://localhost:8081， 打开网址如图所示

在这里插入图片描述

六、（google）添加vue-devtools

在这里插入图片描述

在这里插入图片描述

七、开发工具用VS查看vue代码

1、在VS code 中启动项目

创建完项目后，首先用VS打开项目所在的文件夹，右击资源管理器——在集成终端中打开在这里插入图片描述

在下面的终端窗口命令行输入 npm run serve启动，编译成功后会自动打开浏览器

在这里插入图片描述

八、vue项目结构

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加 前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。

里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。

5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等。

这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。 注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

1）.babelrc:babel编译参数
2）.editorconfig:编辑器相关的配置，代码格式
3）.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
4）.eslintrc.js : 配置代码格式风格检查规则
5）.gitignore:git上传需要忽略的文件配置
6）.postcssrc.js ：css转换工具

九、vue项目结构（新版本）

1)node_modules 所有依赖项
2)public 静态内容
1.favicon.ico 小图标
2.index.html
3)src 项目执行的主目录
1.assets 静态文件
*图片 、
*json、
*iconfont、
2.components 组件
3.router 路由配置文件
4.views 放置页面内容
5.App.vue 项目的根组件，文件中可以写路由出口和路由链接 ，在 main.js里引入
6.main.js 项目的主入口文件
4).gitignore git的忽略文件
5)babel.config.js 设置 babel 的配置的
6)package.json 所有依赖包配置文件
7)README.md 项目文档

*iconfont、
2.components 组件
3.router 路由配置文件
4.views 放置页面内容
5.App.vue 项目的根组件，文件中可以写路由出口和路由链接 ，在 main.js里引入
6.main.js 项目的主入口文件
4).gitignore git的忽略文件
5)babel.config.js 设置 babel 的配置的
6)package.json 所有依赖包配置文件
7)README.md 项目文档

人间过客o>_<o
关注
  • 10
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
图文详解vue框架安装步骤
01-19
vue安装 首先第一步，安装javascript运行环境node.js，根据你系统是32位或64位安装文件如下图。 第二步，安装Nodejs下的包管理器，打开windows命令窗口，输入“npm install -g cnpm –registry=https://registry.npm.taobao.org”命令安装。如下图所示。 第三步，安装vue-cli脚手架构建工具，在windows命令窗口输入”cnpm install -g vue-cli”，如下图所示 第四步，在windows命令窗口输入“vue”,如出现下图所示，表示安装成功。 第五步，输入”cd 安装的目的路径“，”输
vue-devtools的安装步骤
08-27
vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用，这篇文章分步骤给大家介绍了vue-devtools的安装方法，需要的朋友参考下吧
Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了
Javachichi的博客
09-14 3万+
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了_vue配置
最新发布
2401_84297717的博客
04-18 575
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…（这里修改了，我们就不需要安装cnpm了，因为cnpm就是**Node.js淘宝镜像加速器，**这里配置了就不需要安装了）
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 5万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
Vue安装步骤及教程(详细)
Learning_xzj的博客
05-26 2万+
本专栏将从基础开始，循序渐进的讲解Vue的基本概念以及使用，希望大家都能够从中有所收获，也请大家多多支持。 如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。
安装vue教程
qq_42770949的博客
06-08 152
1.Node.js安装 https://nodejs.org/en/download/ 安装好noedeJS然后继续安装下一步 3、执行npm install --global vue-cli ，全局安装vue-cli ----因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。 产生通过config命令设置默认下载路径： npm config set registry https://registry.npm.taobao.org 然后再执行： npm install --global vue-
vue安装详细步骤
qq_42680327的博客
10-11 5916
vue安装详细步骤
Vue安装及环境配置教程(超详细图文教程)
zcj666999的博客
08-19 1万+
Vue安装及环境配置教程(超详细图文教程)
NodeJS入门（一）---nodejs详细安装步骤
tengtianshan的专栏
04-01 2万+
npm使用手册https://www.npmjs.cn/getting-started/installing-npm-packages-locally/ node.js使用https://www.runoob.com/nodejs/nodejs-npm.html 初学NodeJS，就是要弄清楚什么是nodejs，能做什么，怎么用。。 什么是nodejs? 脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的...
Vue安装步骤
m0_46252893的博客
03-17 3315
Vue安装步骤
Vue的介绍以及环境搭建
Lucky的博客
05-31 9974
一、前言 Vue单页Web应用 Vue组件化开发 Node.js完成服务器功能 ElementUI有效实现界面 弹性盒子布局与SASS 二、Vue组件 1、全局注册组件 2、局部注册组件 三、Vue环境搭建 1.安装Vue的前置条件是安装node.js 2.安装vue脚手架 3.在visual studio code中新建vue项目 4.vue.js文件源代码的下载 三、Vue程序运行
vue-cli中安装方法(图文详细步骤)
01-21
下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像...
Vue安装浏览器开发工具的步骤详解
10-17
主要介绍了Vue安装浏览器开发工具步骤详解，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue的安装及使用教程【超详细图文教程】
WHF__的博客
03-07 1万+
安装webpack-cli：npm install --g webpack-cli。⑧选择存放配置，此处建议选择第二个，存放到package.json中，回车即可。此处建议选择默认配置，即直接回车即可。npm install vue -g // -g为全局安装。⑦选择什么时候进行代码校验，此处建议选择第一个，回车即可。④选择vue版本号，这里我选择2.x，回车键继续。③根据自己的需求选择，按空格键选择，回车键继续。⑤这里我选择否，输入： n，回车继续。⑨选择是否保存本次配置。
Vue安装配置教程笔记
weixin_47036445的博客
04-08 730
新增系统变量NODE_PATH，在下面的系统变量中点击新建，弹出下框，把变量值设置成“你的安装目录\node_modules”，这里是“D:\Programming\Vue3\nodejs\node_modules”设置成功后，后续用命令npm install XXX -g安装以后模块就在目录文件夹D:\Programming\Vue3\nodejs\node_global\node_modules里。打开cmd窗口，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。
Edge浏览器安装教程（非常详细）从零基础入门到精通，看完这一篇就够了_microsoftedgesetup怎么安装
m0_57502067的博客
04-17 1114
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
Vue的三种安装方式
guoxuying的博客
11-04 3415
Vue的安装及使用（Vue的三种安装使用方式）
Vue安装详细步骤
pangqixjj的博客
12-02 8329
Vue简介 Vue web前端三大主流框架之一，是一套用于构建用户界面的渐进式框架。 Vue 的目标在于简化Web开发。 Vue自身只聚焦于视图层，因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue也完全有能力地驱动复杂的单页应用。 Vue安装方式 有三种方式：独立版本、CDN方法、NPM方法 用 ...
vue 安装axios步骤
09-01
安装axios步骤如下： 1. 首先，确保你已经安装了Node.js和npm。你可以在终端中运行以下命令来检查它们的版本： ``` node -v npm -v ``` 2. 创建一个新的Vue项目。在终端中运行以下命令： ``` vue create my-app ``` 这将创建一个名为 `my-app` 的新的Vue项目。 3. 进入项目目录。在终端中运行以下命令： ``` cd my-app ``` 4. 安装axios。在终端中运行以下命令： ``` npm install axios ``` 这将通过npm安装axios库，并将其添加到你的项目的依赖中。 5. 使用axios。在你的Vue项目中，你可以在需要的地方引入并使用axios。例如，在一个组件中发送GET请求，你可以这样做： ```javascript import axios from 'axios'; export default { data() { return { responseData: null }; }, mounted() { axios.get('https://api.example.com/data') .then(response => { this.responseData = response.data; }) .catch(error => { console.log(error); }); } } ``` 这是一个简单的例子，展示了如何使用axios发送GET请求并处理响应。 请注意，这只是一个简单的步骤示例。根据你的具体项目和需求，还可能需要进行更多的配置和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人间过客o>_<o

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值