微服务社交平台项目【十次方】（一）-前端环境搭建

一.前端环境搭建

1.1 安装node.js

1.2 npm

新版本node.js自带npm，可用npm -v 查看npm版本

1.2.1 初始化工程

新建一个目录，用命令行进入该目录，输入npm init，初始化该目录

npm init

1.2.2 本地安装

例：在目录的命令行下输入以下命令安装express模块

npm install express

1.2.3 全局安装

全局安装有一个全局目录
输入以下命令查看

npm root -g

例：全局安装下载jquery

npm install jquery -g

1.2.4 批量下载

我们从网上下载某些代码，发现只有package.json,没有node_modules文件夹，这时我们需要通过命令重新下载这些js库。
进入目录（package.json所在目录）输入命令

npm install

1.2.5 淘宝npm镜像

输入命令，进行全局安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org 

安装后，可以用一下命令查看cnpm的版本

cnpm -v

使用cnpm

cnpm install 需要下载的js库

1.2.6 运行工程

如果我们要运行某个工程你，则使用run命令

npm run dev

1.2.7 编译工程

npm run build

1.3 WebPack

官网 www.webpackjs.com
webpack可以将多种静态资源js，css，less转换成一个静态文件，减少了页面的请求。

1.3.1 webpack安装

npm install webpack -g 

webpack 4.0以后还需要安装以下工具

npm install webpack-cli -g

查看安装版本

webpack -v

1.3.2 快速入门

打包内容
1.在/jsdemo/src下放入几个被打包的模块
2.在/jsdemo下编写一个webpack.config.js的配置文件，该文件直接去webpack官网复制即可：
（entry入口点必须存在）

const path = require('path');

module.exports = {
   
  entry: './src/index.js',
  output: {
   
      path: path.resolve(__dirname, 'dist')