Vue-Node安装教程

已于 2022-10-01 22:42:51 修改
阅读量4.3k 收藏 6
点赞数 1
文章标签： vue.js npm node.js
于 2021-11-16 14:45:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoqi12897/article/details/121352596
版权

1.node.js

https://nodejs.org/zh-cn/官网

1.1 检查node js版本

node -v

在这里插入图片描述

2.NPM

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
npm 为你和你的团队打开了连接整个 JavaScript 世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
官网：
https://docs.npmjs.com/about-npm 英文官网
https://www.npmjs.cn/ 中文官网

2.1 检查NPM版本号
npm -v

在这里插入图片描述

2.2 切换淘宝NPM库

Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/ 
方式1： npm install -g cnpm --registry=https://registry.npm.taobao.org
方式2： npm config set registry https://registry.npm.taobao.org  #(建议使用)
npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

在这里插入图片描述

2.3 检查镜像配置是否生效
npm config list

在这里插入图片描述

3.安装VUE和客户端

参数说明

注意单词的大小写

-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global
脚手架安装

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置

安装VUE和客户端

命令:
npm install -g @vue/cli --force  #安装vue-cli脚手架 ---高版本
npm install vue-cli -g  #安装vue-cli脚手架---可能比较慢,要等几分钟 --低版本
npm uninstall vue-cli -g  #卸载vue-cli脚手架 -- 低版本
npm uninstall -g @vue/cli  #卸载--高版本
vue –V #查看版本(大写V)
where vue #vue安装在哪里

等待安装完成之后即可.
在这里插入图片描述
报错
在这里插入图片描述
1.报错处理: 给node_modules足够的权限
2.更换网络试试(很多情况是网络导致)
在这里插入图片描述

创建Vue项目 npm
工作空间

进入工作空间目录：D:\workspace\vue （输入cmd）

生成vue项目

基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

两种方式:

推荐第二种

方式一:
vue init webpack jt01 #此处项目名不能使用大写---可能比较慢,要等(vue-cli2.x的初始化方式) node.js低版本

安装步骤
在这里插入图片描述
安装成功
启动命令:进入指定项目中

npm run dev

在这里插入图片描述

方式二:
vue create csmall-web-client #(vue-cli3.x的初始化方式)node.js高版本

选中Manually select features 按回车键 自定义项目
在这里插入图片描述
使用回车键选中 “Router” “Vuex” 去掉 Linter / Formatter 格式检查项
在这里插入图片描述
选中Vue版本2.x
在这里插入图片描述
直接回车,默认是Yes
在这里插入图片描述
选择 In package.json 回车
在这里插入图片描述
直接回车,默认是No
Save this as a preset for future projects? No (是否保存为模板工程)
在这里插入图片描述
安装成功
启动命令:进入指定项目中

npm run serve

在这里插入图片描述

注：

jt01 为自定义的 项目名称
产生项目webpack模板，目录100+m，可见内容多复杂，庞大
会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生
启动项目 & 停止项目

启动服务

方式一

方式一
cd jt01 # 进入项目目录
npm run dev  #自动启动服务，ctrl+c 停止,可能要等几分钟
测试访问

注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。
在这里插入图片描述
在这里插入图片描述
方式二:

cd csmall-web-client  # 进入项目目录
npm run serve  #自动启动服务，ctrl+c 停止,可能要等几分钟

测试访问

在这里插入图片描述

注: 如果在Gitee或Github上 pull 项目时会缺少 node_modules 依赖文件
npm install #下载依赖重新生成node_modules文件

导入Element-UI

方式二

手动导入 Element-UI 命令

npm i element-ui -S

在根目录下package.json文件中的dependencies下会多出一项element-ui加版本的数据,就证明导入成功

在项目中引入element-ui
在src目录下的main.js文件中引入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

导入 Axios 命令

npm i axios -S

在根目录下package.json文件中的dependencies下会多出一项 axios 加版本的数据,就证明导入成功

**在项目中引入 axios **
在src目录下的main.js文件中引入axios

import axios from "axios";

Vue.prototype.axios=axios

HBuilderX管理Vue项目

打开Vue项目

HBuilderX是最新前端开发利器之一，全面支持Vue的开发，具有丰富的提示，使用它打开：D:\workspace\vue\jt01目录（可自行定义自己的目录）
在这里插入图片描述
在这里插入图片描述

项目结构

在这里插入图片描述

目录结构

这个目录结构非常重要，大家要熟记。就如你要生孩子去妇幼保健院，你要游泳去游泳馆。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

  1. view 就是用户要访问的页面都存放在这个目录下，如Index.vue
  2. static 中保存一些静态的资源，如jquery、css、图片等
  3. src 目录是一个很大的目录，包罗万象
  4. components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
  5. router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。Router非常强大，老系统是url改变是在服务端进行刷新，而router支持在客户端刷新，就是url变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。此处不好理解，后期专门章节论述，不必心急，先记录下这个特点
    在这里插入图片描述

重要文件说明

Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作: 1, 在components里写自定义组件 2, 在App.vue里注册自定义组件 3, 在main.js里引入第三方js

index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中

在这里插入图片描述

src/App.vue 根组件,可以添加自定义组件
src/router/index.js 引入子组件HellWorld.vue

在这里插入图片描述

调用关系图

在这里插入图片描述
简单来说项目加载的过程是：

index.html->main.js->App.vue->index.js->HelloWorld.vue

报错说明

1).如果报错如下
在这里插入图片描述
方案1) .删除用户目录下的文件,之后重新安装. (删除文件 不要删除目录)
在这里插入图片描述
方案2): 执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

4 初始化VUE项目

4.1 初始化UI工程

在这里插入图片描述

4.2 选择VUE 创建项目

在这里插入图片描述

2.3 选择项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
手动创建安装版参考：
https://blog.csdn.net/qq_16804847/article/details/112911057?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163703337116780271591885%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=163703337116780271591885&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2blogfirst_rank_v2~rank_v29-1-112911057.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2226.3001.4450

坚持-不懈
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
thinkphp集成前端脚手架Vue-cli的教程图解
01-21
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli。...注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上 1.2 全局安装vue-cli 命令行执行 : npm install -g vue-cli 加-g是安装到全局，有
vue-node-admin
05-11
文章源码标签意味着 "vue-node-admin" 可能包含了一些示例或者教程，可能是关于如何使用 Vue.js 和 Node.js 开发后台管理系统的详细步骤，涵盖了从安装依赖、初始化项目、创建路由、处理API请求到部署上线等全过程。...
如何安装node_modules
qq_55061257的博客
07-21 6260
第二步npminstall-gcnpm--registry=https//registry.npm.taobao.org。第一步运行cnpminstallrimraf-g。1、在需要安装的文件路径里用cmd打开。2、运行安装淘宝镜像。
NODEJS安装和vue安装及运行方法以及出现Cannot find module ‘node-sass‘ Require stack问题解决方法，以及npm和cnpm区别，以及使用cnpm安装教程
munangs的博客
04-18 7712
NODEJS安装和vue安装及运行方法以及出现Cannot find module ‘node-sass‘ Require stack问题解决方法，以及npm和cnpm区别，以及使用cnpm安装教程，安装yarn教程，并附完整教程流程图片，以及安装yarn完整教程和流程展示
vue-cli依赖配置原理及如何重装node_modules
最新发布
Mrs_Lupin的博客
05-18 630
webpack定义:本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。静态模块：指的是编写代码过程中的,html, css, js,图片等固定内容的文件打包：把静态模块内容，压缩，整合，转译等（前端工程化）把less / sass 转成 css 代码把 ES6+ 降级成 ES5构建。
vue项目打包上线优化
rambler_designer
12-15 447
目录一、前言二、着手点1. 图片和favicon.ico进行压缩2. 相关依赖转用CDN3. 使用gzip压缩三、附件(vue.config.js全文件) 一、前言 写过几个vue的案例也好,项目也好都没有真正上线, 就连公司的项目都是直接打包给后台统一部署, 因此打包相关经验比较少, 大学一直在做的一个个人博客在部署到阿里服务器以后访问一直都很慢(学生机带宽只有1M), 之前听别人说过可能是DNS劫持, 仔细研究发现其实并没有, 在控制台能看到一直在请求各种文件, 图片, js, css, 图标等等,
vue —— nodejs 安装
m0_51976820的博客
05-13 838
vue —— nodejs 安装
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
vue-devTool编译和安装教程附源代码和编译后的安装包
04-03
本教程将详细介绍如何编译和安装Vue DevTools，以及如何使用源代码进行操作。我们将分为以下几个步骤进行： 1. **环境准备** - 首先确保你已安装Node.js和npm（Node包管理器）。这两个是Vue DevTools编译所必需的...
Vue安装及环境配置教程(超详细图文教程)
热门推荐
zcj666999的博客
08-19 2万+
Vue安装及环境配置教程(超详细图文教程)
node安装与环境搭建 + VUE项目搭建
m0_57161115的博客
10-19 2810
node安装与vue项目搭建
Nodejs安装node_modules
m0_63737415的博客
07-20 1768
5如果使用cnpm需要安装前面如果不使用nrm切换,此处也可以指定淘宝镜像仓库。1npminstall安装node-modules。6cnpminstall安装node-modules。4nrmusetaobao指定使用淘宝镜像。3nrmls查看使用镜像。2先安装nrm淘宝镜像。...
如何在vue的项目中，安装node_moules包
m0_56195392的博客
12-06 1512
只需要在自己项目里打开终端，输入npm i 即可
vue项目初学者npm如何安装与配置
Laity07的博客
05-19 2656
vue项目初学者npm如何安装与配置
vue-cli中安装方法
adai19850204的博客
11-07 2906
源：http://www.cnblogs.com/jn1223/p/6656956.html vue-cli中安装方法 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘...
运行从git上拉下来的项目报错：“此文件夹缺少‘node_modules’”，请安装后再尝试导入
qq_45791799的博客
04-20 4593
今天从git上 clone了一个项目，发现报错：查资料才发现是因为缺少node_modules，每个git上拉下来的项目需要单独安装node_modules。 这是因为npm是vue的包管理器，而“node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹；比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。” 解决：执行命令 npm install（使用淘宝镜像的执行命令：cnpm install）
git使用系列 3.4 git上传忽略node_modules
weixin_30824599的博客
04-08 653
1、在需要创建 .gitignore 文件的文件夹, 右键选择Git Bash 进入命令行，进入项目所在目录。 2、输入 touch .gitignore ，生成“.gitignore”文件。 3、在”.gitignore” 文件里输入你要忽略的文件夹及其文件就可以了。（注意格式） 我的.gitignore .DS_Store node_modules/ dist/ npm-de...
vue安装最新版Vue或者指定版本
milijiangjun的博客
08-14 1万+
1 查看 node 版本 node -v 2 查看npm 版本 npm -v 3 安装最新的vue npm install -g vue-cli — 这个命令已经废弃了3.0以后 npm install -g @vue/cli 4 安装指定版本的vue npm install -g @vue/cli@版本号 例如 ： npm install -g @vue/cli@3.11.0 5 卸载vue npm uninstall -g @vue/cli ...
vue-cil安装教程
05-18
以下是Vue CLI的安装教程： 1.首先，确保已经安装了Node.js。在终端中输入以下命令进行检查： ``` node -v ``` 如果能够显示当前Node.js的版本号，则表示Node.js已经安装成功。 2.使用npm（Node.js的包管理器）...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值