Node、webpack、脚手架vue-cli，介绍与安装，无缝连接教程_webpack 和 nodecli(1)

2401_84437982

于 2024-05-16 00:30:27 发布

阅读量248

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84437982/article/details/138929113

版权

程序员专栏收录该内容

162 篇文章 0 订阅

订阅专栏

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

node_global的文件位置放上去


由于npm是国外的服务器，所以下载比较慢，我们需要安装淘宝镜像 安装淘宝镜像:


1、复制网址： 


2、复制淘宝镜像的指令: npm install -g cnpm --registry=https://registry.npm.taobao.org


3、打开cmd：将复制下来的指令粘贴即可


### webpack:构建工具和打包的


**安装webpack:**


npm i(install) webpack-cli -g(global)


cnpm i(install) webpack-cli -g(global)


当webpack出现错误的时候（使用以下指令，重装webpack）


**卸载webpack:**


* 安装install
* 卸载uninstall


cnpm uninstall webpack-cli -g(global)


### Vue脚手架:


vue-cli就是vue的脚手架工具,和我们在工地上看到的脚手架是一样的，它帮助我们搭建基本的开发环境， 就好比如架子搭好了，利用它搞定目录的结构、本地调试、单元测试、热加载及代码部署

热加载（不需要重启项目）


#### 2.X版本的脚手架安装：


1、cnpm i vue-cli -----安装vue2.x版本的指令


2、vue -V（大写）----查看vue的版本（出现版本号，就是安装成功）

3、2x版本创建项目
vue init webpack （项目名）—>回车
注意：项目名字母不能大写，不能使用中文
原因：这个指令的意思是初始化一个vue项目，webpack是构建工具，
也就是整个项目是基于webpack的。其中项目名称是整个项目文件加的名称，
这个文件夹会自动生成在你指定的目录中。

  project name ---> 项目名称 ---》回车
  author 作者      --->回车填写作者名
  vue-router  是否选择安装路由，这是官方的路由
  eslint  --->no 严格规范（规范写代码的格式）
  test 是否安装单元测试
  e2e 是否安装e2e测试
  
在cmd命令窗口中：ctrl+C按2次，是停止操作


#### 安装3.X版本


需要安装桥接工具 向下兼容: 如果使用npm安装较慢就使用cnpm安装


npm i -g @vue/cli-init cnpm i -g @vue/cli-init

安装3.X版本的脚手架指令
cnpm i -g @vue/cli

创建项目
vue create 项目名称
使用什么方式运行项目：npm(第一个选项)---->弹出一个窗口
default是一默认使用配置，默认安装及自动配置babel,eslint
Manually select features是自定义配置，需要我们手动配置，可以自己选择配置什么东西
使用↑↓k控制上下—》回车选择（确定）
初始化项目
cd 项目名