手机网站开发团队,301 wordpress,定制化网站,网站开发专业职称有哪些Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript#xff0c;基于Chrome V8 引擎的。 npm 是Node.js 的包管理工具。 npm的安装和更新 Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。 查看安装版本信息#xff1a; -… Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript基于Chrome V8 引擎的。 npm 是Node.js 的包管理工具。 npm的安装和更新 Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。 查看安装版本信息 -- node -v 查看Node.js 版本信息 -- npm -v 查看npm版本信息 更新npm到指定版本 -- npm install npm5.3.0 -g -- npm install npmlatest -g 更新最新的稳定版本 npm 常用操作 之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目而且要管理版本。 有了npm我们管理自己的依赖包以及版本更加简单。 到自己项目目录下进行以下命令 -- npm init -y 输入-y使用默认配置项 生成package.json文件。 -- npm i jquery0.0.0 简写install 为 i 下载依赖 不写 默认最新版本 -- npm uninstall jquery 卸载依赖包 -- npm update jquery 更新依赖包 -- npm list 列出已安装的依赖 -- npm install webpack --D 保存为开发环境依赖 -- 老版本需要 --save 参数 现在不需要了 我们的项目目录下会生成一个 node_modules 目录我们用npm下的包会在这个目录下。 我们所有的依赖信息放在package.json文件中包括我们所有的依赖以及版本。 如果我们删掉 node_modules目录可以使用 npm i 来下载所有依赖。 npm 常用配置项 当我们用npm init 的时候用了参数 -y如果不用-y我们可以进行一些配置。 在我们的package.json文件中有很多配置项 -- name 项目名字 中间不能有空格只能用小写 -- version 项目版本 -- description 项目描述信息 -- main 项目的入口文件 -- scripts 指定命令的快捷方式 npm run test test是scripts里的键名 值为具体命令 -- author 作者 -- license 许可证 -- dependencies 生成环境依赖的包以及版本信息 -- devDependencies 开发环境的依赖 webpack3 webpack是什么 webpack是一个模块打包器它将根据模块的依赖关系进行静态分析 然后将这些模块按照指定的规则生成静态资源。 那么我们为什么要用这个东西呢~~因为前端的包袱太多历史遗留问题太重~~~脑补吧...... 安装和配置 webpack是跑在Node.js环境下的所以确定自己有node环境。 安装方式 -- npm install webpack -g 全局安装 -- webpack 要打包文件 打包后文件 全局这种方式进行打包 -- npm install webpack 在自己的项目下 npm init 后在下载webpack 这就是局部安装 -- node_modules/.bin/webpack 要打包文件 打包后文件 项目里要打包文件是入口文件 -- 路径太长 太烦 可以自定义命令 在package.json 文件的 scripts下面自定义 entry 和 output entry 入口文件 output 出口文件 上面我们自定义命令的时候 命令太长了~~而且我们命令太多的时候我们需要每次都自定义多条命令~~ 我们可以把命令写在webpack.config.js文件中~~ module.export {// 所有的入口文件entry: {home: ./main.js, login: ./login.js,}, // 出口文件 output: {filename: [name].bundle.js,path: __dirname /dist,}
}
// backage.json 下的scripts
scripts: {pack: node_moudles/.bin/webpack --watch
}// 运行命令
npm run pack webpack.config.js webpack4 webpack的新特性 1, webpack不在单独使用需要webpack-cli -- 全局安装 npm install webpack webpack-cli -g -D -- 局部安装 npm install webpack webpack-cli -D 2, 增加了模式区分 development, production --webpack --mode development/production 进行模式切换 -- development 开发者模式 打包默认不压缩代码 -- production 生产者模式 上线时使用压缩代码。 默认是这个模式 3固定入口目录为src与入口默认文件index.js打包后文件在新增的dist目录下 -- 当只有一个入口文件也就是src/index.js时无需增加webpack.config.js 4多入口以及多出口 entry: {// 多入口a: ./src/js/index.js,b: ./src/js/index2.js,
}
output: {// 多出口path: path.resolve(__dirname, dist),filename: ./js/[name].bundle.js
} webpack.config.js vue-cli vue-cli是官方提供的快速构建这个单页面应用的脚手架。 根据官方文档中的构件流程 -- 前提是已经安装了node.js 否则npm都用不了 -- 1使用npm全局安装vue-cli npm install -g vue-cli -- 2, 安装完成后在自己的工作空间里 vue init webpack vue-demo 输入命令后进入安装阶段需要用户输入一些信息 这里省略了..... -- 3切换到我们的项目目录下 cd vue-demo npm run dev 目录结构 -- build 里面是一些操作文件使用npm run * 时其实执行的就是这里的文件 -- config 配置文件执行文件需要的配置信息 -- src 资源文件 所有的组件以及所有的图片 都在这个文件夹下 -- node_modules 项目依赖包 -- static 静态资源 -- package.json 依赖包的json文件 其实这里面命令很多~我们在后续项目中应用到再说~~~ vue-cli配置JQuery、bootstrap 第一步 下载安装 -- npm install jquery -- npm install bootstrap 第二步 修改build/webpack.base.conf.js const webpack require(webpack)
// 在module.exports里添加插件
plugins: [new webpack.ProvidePlugin({$: jquery,jQuery: jquery,windows.jQuery: jquery,// Popper: [popper.js, default]})
],
// *******下面是如果手动下载bootstrap用的*******
resolve: {extensions: [.js, .vue, .json],alias: {vue$: vue/dist/vue.esm.js,: resolve(src),// 如果是手动下载的bootstrap需要添加这个配置// assets: path.resolve(__dirname, ../src/assets),// jquery: jquery/src/jquery}}, 修改配置文件 第三步 修改主程序的js文件 main.js import $ from jquery
import bootstrap/dist/css/bootstrap.min.css
import bootstrap/dist/js/bootstrap.min.js main.js 可以用啦~~~~~ vue-cli 3.0 第一步 下载vue-cli 3.0 -- npm install -g vue/cli -- 报错 npm error 可以运行下面命令 -- npm cache clean --force npm cache verify 第二步 创建项目 -- vue create xxxx 之后会出现很多选项我们可以根据自己的习惯去选择~~ 第三步 目录结构以及配置文件 -- vue-cli3 目录更加简单 -- 我们手动在项目根目录下创建 vue.config.js 里面写vue的配置信息 vue-cli3 配置jQuery、bootstrap -- 跟vue-cli2一样的配置手动创建一个webpack.base.conf.js 转载于:https://www.cnblogs.com/caodneg7/p/9954803.html
