JavaScript-前端环境搭建-nodejs-打包分发-Webstorm-vue安装创建

文章目录

    • 1.Node环境安装
    • 2.Node环境配置
    • 3.新建项目
    • 4.安装常用包
      • 4.1.vue安装
      • 4.2.安装webpack
    • 5.总结

Web大前端技术,是一项使用范围非常广泛的技术,以JavaScript脚本语言为主使用,由于其本身开源的特点,可以使用的轮子非常的多,一些特定轮子,具有不错的商业价值,本文介绍从布局开始,逐步介绍这些轮子,借鉴这些轮子。

1.Node环境安装

简单的说 Node.js就是以JavaScript为脚本语言的运行环境,基于 Chrome JavaScript 运行时建立的一个平台,Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。
下载网址:https://nodejs.org/en
选一个稳定版本,下载安装即可。
输入命令:

node -v

如下图所示,测试是否安装成功。
JavaScript-前端环境搭建-nodejs-打包分发-Webstorm-vue安装创建_第1张图片

2.Node环境配置

进入nodejs安装目录,cmd启动命令行,定位到该目录,如下图所示:
JavaScript-前端环境搭建-nodejs-打包分发-Webstorm-vue安装创建_第2张图片
更新镜像为国内镜像数据源。这样下载包会快很多。在此安装目录下创建文件夹node_global和node_cache,作者是为了方便管理,在其它位置创建也可以,修改nodejs默认的全局文件夹和缓存文件夹为node_global和node_cache。如下所示:

npm config set registry https://registry.npmmirror.com #设置镜像
npm config get registry #查看镜像

#设置缓存目录
npm config set prefix "E:\work\CurrentProject\nodejs\node-v16.14.0-x86\node_global"
npm config set cache "E:\work\CurrentProject\nodejs\node-v16.14.0-x86\node_cache"

3.新建项目

新建空白项目目录,shell定位到该目录,输入如下命令,初始化包管理配置文件 package.json:

npm init -y

查看全局模块安装目录

npm root -g

4.安装常用包

4.1.vue安装

输入如下命令进行包安装

npm install vue -g
npm i @vue/cli -g

验证vue

vue -V

如下图所示:
在这里插入图片描述
然后使用webstorm创建vue项目,如下图所示:
JavaScript-前端环境搭建-nodejs-打包分发-Webstorm-vue安装创建_第3张图片
注意项目名称不要使用大写字母,vue项目名称不允许使用大写字母。
成功之后如下所示:
JavaScript-前端环境搭建-nodejs-打包分发-Webstorm-vue安装创建_第4张图片

4.2.安装webpack

webpack分成四个部分,期中最核心的就是入口和出口,当然在入口和出口配置的同时我们还需要一些加载器和插件,这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ,还有webpackfile.js 。详细配置在后文中详细描述。

npm install webpack -g
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev less-loader less
npm install --save-dev file-loader
npm install --save-dev babel #ES6转ES5的babel。

5.总结

前端简单显示到大前端复杂布局,这是一个大趋势,可以充分利用前端浏览器的计算能力来分担一部分工作,做到更有效的利用资源。

你可能感兴趣的:(Web,JavaScript,前端,javascript,webstorm)