今天小小安装一下脚手架

最新推荐文章于 2024-06-13 17:08:26 发布

开发者@介

最新推荐文章于 2024-06-13 17:08:26 发布

阅读量40

点赞数

文章标签： node.js webpack

本文链接：https://blog.csdn.net/m0_65789413/article/details/130874785

版权

一.安装脚手架首先就是需要安装node.js

需要注意的是,node的版本一定不能太新,比如现在的版本是1.18的,就无法和安装脚手架的前置组件webpack兼容(webpack的版本为5.0,webpack-cil的版本为3.3),需要将1.18卸载,重新安装1.16的

二.安装webpack 类似于 gulp

1,什么是webpack ?

Webpack 是当下最热门的前端资源模块化管理和打包工具。

2,webpack 有什么作用 ?

(1)它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
(2)将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等
(3)而且在使用了各种插件之后，还能打包css文件，图片文件，甚至是html和txt文件。
(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。
(5)使用了插件之后，还能实现代码压缩，代码检查等功能。

3.webpack安装
npm install webpack@5.0.0 -g
npm install webpack-cli@3.3.12 -g

安装之后,执行webpack -v 显示webpack版本号, 如果只显示一个版本号,表示正常,
如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli
如果重装低版本后,执行webpack -v还显示高版本,需要把高版本删了,重装低版本, 删除路径: C:\Users\Administrator\AppData\Roaming\npm\node_modules

如果node安装在了其他盘里通过使用npm root -g 找到npm全局安装的路径,复制路径,找到该文件夹,在里面找到webpack 和 webpack-cli

三.安装vue CLI(脚手架)

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

注意:

vue语法版本和vue脚手架版本注意区分?

vue语法版本: 1.x 废除 2.x 之前的主流,大部分老项目都在用 3.x 21年上半年正式发布,大部分新项目在用

vue脚手架版本: 1.x/2.x 以前老的项目使用的版本 3.x/4.x/5.x目前主流版本

1.安装脚手架(现在安装一般是安装5.x的)

npm install -g @vue/cli

安装完成后，可以使用 vue -V （这个 V 是大写的）查看版本号

2.创建项目

vue create project-name