vue2.0脚手架1

同事说了,你看不懂,就先去vue官网看一下,你可以看你用的是哪个网站这样子。

介绍 — Vue.js (vuejs.org)  说一天就能看完。really?

Vue2.0 新手入门 — 从环境搭建到发布 | 菜鸟教程 (runoob.com)

 

 

npm i vue element-ui axios
npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/preset-env

 


先看官网vue2.0 。https://cn.vuejs.org/v2/guide/
https://www.runoob.com/w3cnote/vue2-start-coding.html


这两个包是普通依赖,需要放到package.json中的dependencies中。
webpack-cli是终端命令。
load是转换代码。vue-templete-compiler是转换里面的html。
sass转换,假设用的是sass文件,sass转换问题需要用到sass-loader.
sass会把sass文件转换成css。我们对css文件进行处理,用 css-loader。css处理之后还需要用到style标签添加到html文件里面,所以用到style-loader。
处理js文件,需要用到新语法,babel-loader.
@babel/core是babel的核心库。预设的@Babel/preset-env,env是兼容最新的。

 


common.js文件专用于node语法下的。
在webpack的里面,load的作用就是做转换的作用。
module下面rules里面写数组。。vue$就是以.vue结尾的。
plugins是插件的意思。plug是插入的意思。插件是一个数组,插件会有构造函数。每一个插件是构造函数的实例。
entry是入口文件,入口就是main.js。output是输出到哪去。output里面的path写的是绝对路径。filename是输出的文件夹叫什么名字。
module是模块,模块的打包规则rules,数组里面是对象,test是匹配文件的,通常判断拓展名,use是使用,使用什么处理这个文件。plugins是插件增加功能,具体什么功能是插件本身决定的。plugins是个数组,数组元素,实例化的构造函数。这个是结构。。
从接口文件入口文件开始分析,./点斜杠是当前目录下的。
path要写绝对路径。path: _ _dirname + 'dist';
linux的地址分隔符是斜杠 /,windox页面分隔符是反斜杠 \。就不统一了,所以需要用到一个函数,用require函数。
require函数是common.js的导入对象。module。common.js就是在node下面专用的一个模块,path模是node内置的。
mjs是module js

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

template是结构,script是javascript是行为,style是样式。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2022-05-31 19:27  xiaoluoke  阅读(13)  评论(0编辑  收藏  举报

导航