左右.-CSDN博客

原创 Vue CLI-脚手架的介绍和安装

为什么使用Vue CLI？ 1、使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等； 2、如果每个项目需要手动完成，则效率较为低下，所以通常使用脚手架工具帮助完成 CLI是什么意思？ 1、CLI是Command-Line Interface的简称，翻译为命令行界面，俗称脚手架 2、Vue CLI是一个官方发布的Vue.js项目脚手架 3、使用vue-cli可以快速搭建Vu...

2021-07-06 21:56:38 99

原创 webpack配置文件分离（补充）

为什么？因为在开发时依赖一个配置文件，真正发布时依赖另一个配置文件首先，在项目的根目录下，建立build（自定义）文件夹，在文件夹里，建一个js文件，我暂且称为base.config.js，在这个文件里，我们将之前webpack.config.js的完整代码拷贝进来，但需要清楚，base中放置的是公共的代码，即开发时依赖，发布生产时也依赖，其中不需要存在在base中 1. 丑化js文件的代码 newUglifyjsWebpackPlugin() 2. 配置本地服务器的代码 ...

2021-06-30 18:20:02 107

原创 webpack-dev-server搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器是基于node.js搭建，内部使用express框架，可以实现想要让浏览器自动刷新显示我们修改后的结果。我们需要在webpack使用之前安装它-->npm install --save-dev webpack-dev-server@2.9.1 devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里我们需要填写./dist port：端

2021-06-30 17:34:43 218

原创 webpack的plugin（插件）

1. 添加版权的插件（简单）该插件的名字叫做BannerPlugin，属于webpack自带的插件按照下面的方式修改webpack.config.js文件 const webpack=require('webpack'); module.exports={ ... plugins:[ new webpack.BannerPlugin('最终版权归---所有') ] } 重新打包的程序：查看bundle.js文件的头部，可以...

2021-06-29 22:54:44 344

原创 webpack配置Vue

1. 安装vue-->npm install vue--save（因为不是开发时依赖，所以取消-dev） 2. 使用vue进行开发 // 在node_modules中找到使用npm install -save vue建的包并导入 import Vue from 'vue'; new Vue({ el:'#app', data:{ message:'Hello,webpack' }, }); 3. 在页面上进行挂载 <body> .

2021-06-28 16:58:45 136

原创 webpack的loader

1. css-loader和style-loader的引用 1. 在main.js中依赖css文件-->require(./css/normal.css) 2. 终端中配置css-loader-->npm install css-loader@2 --save-dev 3. 终端中配置style-loader-->npminstallstyle-loader@1 --save-dev 4. 在webpack.co...

2021-06-26 18:33:48 82

原创 webpack的配置

1.创建webpack.config.js包-将webpack的入口和出口进行包装-即不需要每次在终端中输入路径 // 会在node包中寻找,依赖node包 const path=require('path'); module.exports={ // 入口 entry:'./src/main.js', // 出口 output:{ // 动态获取路径 // path.resolve()函数对两个路径进行拼接 // 参数1:

2021-06-26 17:58:39 96

qq_43642367的博客