-
2-2(6) 1)在入口文件(index.js)中导入test.stylus.styl文件； 2)执行打包命令:npm run build 如下图查看全部
-
2-2(5)新建test.stylus.styl文件，在这个文件中，既可以以缩进的形式编写CSS样式(如下图)，也可以编写传统的CSS样式形式。查看全部
-
2-2(4)配置css资源预处理loader,如下图:查看全部
-
2-2(3)执行webpack打包命令: npm run build 可以看到，dist目录下输出了图片静态资源，如下图所似。通过查看bundle.js文件，发现css文件内容已经被打包到bundle.js文件中。查看全部
-
2-2(2)在打包入口文件(index.js)中使用关键字import导入静态资源文件(css、image)，如下图:查看全部
-
2-2(1)上一节使用webpack成功打包编译了js文件，当然，除了js文件之外，webpack可以打包一切前端静态资源，只需完成以下几个步骤: 1)webpack.config.js中配置相应的打包规则，可以仿照上一节配置打包js文件的的规则来配置其他静态资源的打包规则； 2)使用npm安装对应的 loader【如下图】； 3)在项目中引入其他静态资源； 4)执行webpack打包命令:npm run build查看全部
-
2-1(8)再次执行打包命令: npm run build 可以看到，这次打包成功，输出目标文件 dist/bundle.js文件，这个通过<script>标签引入到htr文件中，然后在浏览器执行。 (注:视频中没有演示在浏览器中执行bundle.js)查看全部
-
2-1(7)根据错误提示，在webpack.config.js文件中添加处理单文件组件的规则的配置，如下图所示，这段配置规则的作用是: 使用 vue-loader来处理以 .vue结尾的文件，它是一个正则表达式匹配规则。查看全部
-
2-1(6) 使用webpack执行打包: 1)首先在npm项目的配置文件(package.json)文件中添加webpack运行打包的相关配置,添加下面这一行配置: "build":"webpack --config webpack.config.js" 这行配置的作用是: 在执行webpack打包命令时，使用的是本项目安装的webpack版本，而如果没有这行配置，直接执行打包命令，使用的是全局安装的webpack版本。 2)执行webpack打包命令: npm run build查看全部
-
2-1(5) webpack的配置详情，如图:查看全部
-
2-1(5) 很显然，上一步创建的app.vue组件无法直接在浏览器中运行的，需要webpack工具进行打包编译，所以: 1)新建webpack打包入口文件: index.js 2)新建webpack配置文件:webpack.config.js 3)配置webpack打包的输入文件为index.js ,输出目标为: dist/bundle.js，webpack在打包时会自动创建bundle.js文件，bundle.js文件可以直接在浏览器中运行。查看全部
-
2-1(4) 新建src目录作为项目源码放置目录，在src目录下创建一个vue组件: app.vue查看全部
-
2-1(3) 根据上一步的警告提示，安装相应的css-loader和vue-template-compiler 从截图中可以看到老师安装的vue的版本为vue@2.5.13查看全部
-
2-1(2)安装Vue 、Vue-loader查看全部
-
2-1(1) 初始化项目: npm init 说明: 初始化一个npm项目，回车之后，出现的选项一路默认即可。查看全部
举报
0/150
提交
取消