编译单个vue

① laravel 怎么编译vue

最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架.
总的来说，对于学习完tp框架后，我觉得tp毕竟是中国人自己写的，所以很多思想还是很好接受的，如果你想对php框架入门的话，我倒觉得tp是个挺不错的选择。
当然ci框架也是一个很不错的选择。因为它足够轻量级。tp的mvc架构会让你很好接受。
在前后台的应用上看起来很方便。当然这在yii框架里好像更简单方便些，因为我只是接触国yii框架，不是特别了解。在接下来我想去会一会这个框架。
但laravel应该还得再学习，自己用laravel写了自己的博客。
当然还需要完善。因为在我看到laravist这个laravel国内的视频社区时我有也种想法。做不到那么好。但至少我觉得能实现自己的一些需求也是一件好事。

② vue压缩后的js可以反编译出来吗

vue压缩后的js可以反编译出来，反编译方法为：

1、在桌面找到自己下载的浏览器软件，点击浏览器图标。

③ Vue项目中中编译正确 控制台出现下列错误是什么情况

1.
程序里可以含有不支持静态编译的控件.
如:
字体选择框
选择颜色对话框
等
2.
也有可能是易语言软件的问题...可以重装安装下试试

④ vue前端面试题有哪些呢

文章中给你列举了部分的面试题，这些都是公司面试常遇到的，还有需要的还可以自己去查阅一下资料
1、active-class是哪个组件的属性？嵌套路由怎么定义？
答：vue-router模块的router-link组件。
2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
3、vue-router有哪几种导航钩子？
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
4、scss是什么？安装使用的步骤是？有哪几大特性？
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：mole里面test、loader
4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个mole属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？
答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper
6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？
答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
7、axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？
答：跨域，添加用户操作，更新操作。
9、什么是RESTful API？怎么使用?
答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete
10、vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
13、说出至少4种vue当中的指令和它的用法？
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定
14、vue-router是什么？它有哪些组件？
答：vue用来写路由一个插件。router-link、router-view
15、导航钩子有哪些？它们有哪些参数？
答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种
16、Vue的双向数据绑定原理是什么？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
ps：16题答案同样适合”vue data是怎么实现的？”此面试题。
17、请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
18、请说下封装 vue 组件的过程？
答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
19、你是怎么认识vuex的？
答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
20、vue-loader是什么？使用它的用途有哪些？
答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
21、请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：smithButton命名，使用的时候则smith-button。
23、聊聊你对Vue.js的template编译的理解？
答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

⑤ weex最新版如何将.vue编译成.js文件

1.在components 目录下新建一个validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
这就是我们的插件，定义了一个属性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我们到user-username.vue 组件下验证一下:
mounted(){
alert(this.$myName);
},
浏览器访问登录页面，成功弹出：
这里写图片描述
4.刚刚我们已经学会插件里定义属性，马上来学一下如何定义方法：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同样可以使用该方法：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
这里写图片描述
我们修改user-name.vue 组件，来实现文本框验证：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用户不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用户名改变的方法里判断 用户名是否复合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false; // 如果验证没有通过就显示错误提示
}else{
this.showErrorLabel = true;
}
// 调用父组件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
这里写图片描述
自定义指令
文档：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果没有填写,默认为true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 只会调用一次
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我们自定了一个uname 指令，下面来看一下如何使用的？
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我们在组件的模板里使用了 v-uname ，并且给绑定了”username”数据。
我们打开浏览器的控制台：
这里写图片描述
说明我们定义的指令里，这个方法执行了：
bind(){
console.log("bind"); // 只会调用一次
},
3、下面我们来看一下update 里的东东
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}

⑥ vue编译后的js和map文件修改不了吗

无法还原，编译后的js为压缩文件，很多代码都不存在了

⑦ 手写实现vue3数据响应式 vue3全新vdom+编译器改进vue3编译器流程\x09vue3 p

摘要 reactive## 关于Vue3

⑧ weex最新版如何将.vue编译成.js文件

1.components 目录新建validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
我插件定义属性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我user-username.vue 组件验证:
mounted(){
alert(this.$myName);
},
浏览器访问登录页面功弹：
写图片描述
4.刚刚我已经插件定义属性马何定义：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同使用该：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
写图片描述
我修改user-name.vue 组件实现文本框验证：


用户名


用户合
写图片描述
自定义指令
文档：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 没填写,默认true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 调用
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我自定uname 指令面看何使用

我组件模板使用 v-uname 并且给绑定username数据
我打浏览器控制台：
写图片描述
说明我定义指令执行：
bind(){
console.log("bind"); // 调用
},
3、面我看update 东东
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}

⑨ Vue 模板编译 是用来代替JSP的吗

JSP可以和Vue一起使用，但vue本身更倾向于基于node的服务端渲染SSR

⑩ vue和angular 编译速度谁更快

框架之间的对比虽然是老生常谈，但也确实是绕不过去的话题，Vue本身的文档里也直接就有和其他框架的对比。同为开源的技术方案，比较本身其实没有任何问题，但在写Vue与其他框架的比较的时候，我们尽力做到两点：

1. 确保事实的准确性。有的就是有，没有就是没有，不确定的就不说，弄错了一定改。

2. 确保语气的中立性。别人的缺点指出但不嘲讽，优点大方承认。

之前 @汪志成 对Vue跟 Angular 的比较文案提出了意见，我们也对应地进行了修订。也欢迎社区继续进行监督和反馈 —— 比较的目的不是扭曲大家的认知，而是为了帮助大家做出自己的判断。

现在说回来大漠（后面都用大漠指代，注意跟 w3cplus@大漠老师不是一个人，对不住了哈哈）的这篇文章，很遗憾，以上两点都不及格。

先说事实。

CLI/工具链

首先两个框架 CLI 的定位不一致。vue-cli 不是一个打包工具，它只是一个 scaffold，也就是初始化工具。真正负责打包的是初始化之后项目内的 webpack 配置和 npm 脚本。从一开始vue-cli 就是这样的设计意图，项目真正的工具链在项目模板里面而不是 CLI 里面。

相比之下 @angular/cli 是一个全包式的命令行工具，一切都是通过 `ng` 来执行，但这不代表 `ng` 有的命令Vue就没有对应的功能 —— 比如在vue-cli 生成的项目里面：

• npm run dev 对应 ng serve

• npm run build 对应 ng build

• npm run lint 对应 ng lint

• npm run unit 对应 ng test

• npm run e2e 对应 ng e2e

除了 i18n 之外，@angular/cli 有的Vue都有。‘很多日常开发必备的功能都需要开发者自己去下载配置第三方的Node模块’这句话是一个事实上的错误。看起来大漠连vue-cli 生成的项目都没跑过就急着写文章了呢。

其次，CLI 命令/参数多 =更优秀？并没有这样的道理，create-React-app 估计要哭晕在厕所了。如果我们仔细看看文中的截图，ng build 的多个参数，其实就是对应不同的底层 webpack 配置。说实话，我相信不仅仅是我，对于很多其他开发者而言，更宁可直接阅读 webpack 的文档来调整真正的 webpack 配置（并且可以 commit 进项目），而不是去额外学习一套由 Angular 封装的抽象，因为实际生产中需求千变万化，完全被 CLI 封装的配置不利于二次开发。

实事求是地说，@angular/cli 确实有一些值得学习的地方，比如 ng serve 对 SSL 的支持。我们也会在新版本的vue-cli 中持续吸收改进，但连vue-cli 能做什么都没弄清楚就拿玩具来打比方，只能贻笑大方了。

异步加载模块

我不知道为什么大漠又截了个不知哪里的旧中文文档的图，还没截全 —— 最新的关于异步加载的文档是下面这两个链接：

• 文档中关于异步组件的部分

• 路由文档关于路由懒加载的部分

Vue将一个组件（以及其所有依赖）改为异步加载，所需要的只是把：

• import Foo from './Foo.vue'



改成

• const Foo = () => import('./Foo.vue')



就这么简单。这里注意三点：

• 当这样分割的时候，该组件所依赖的其他组件或其他模块都会自动被分割进对应的 chunk 里，不存在大漠所暗示的‘手动改 500 个组件’这样的情况。况且两边代码分割的功能都是 webpack 提供的，我真不知道大漠是真的不懂还是故意误导。

• 所谓的路由级别的分割，只需要把这个组件作为路由组件就可以了，甚至连路由配置表都不用改。

• 更重要的是这样的异步组件并不一定只能用在路由层面 —— 任何你要用到一个组件的地方，都可以用异步组件无缝替换之，这种灵活性是 Angular 的 loadChildren 根本无法比拟的。比如一个动态的长表单页面，你甚至可以根据用户目前的输入来动态抓取表单接下来的部分（这个用例还是 wepback 的维护者 Sean Larkin 发现并用在生产中的）。

单元测试和集成测试

• Vue的单元测试需要你自己去安装配置 Karma + Jasmine

—— 事实错误。vue-cli 的 webpack 模板内置了开箱即用的 Karma + Jasmine 配置，自带了一个初始测试用例，npm run unit 即可。这又双一次证明大漠根本没有跑过vue-cli 生成的项目。

Vue的单测不仅仅支持 Karam + Jasmine - 事实上社区有广泛的单测反馈，对于 Jest, Ava 都有实践，我们正在开发中的官方的单测工具库vue-test-utils （由社区最流行的单测库 avoriaz 的开发者开发）会进一步简化常见的组件单测断言需求，并且还会有和所有主流 test runner 的整合指南。

• 在集成测试方面，Vue就只能是0分了，因为压根什么都没做。

—— again，事实错误。vue-cli 的 webpack 模板内置了开箱即用的 Nightwatch + Selenium E2E 测试配置，自带了一个初始测试用例，npm run e2e 即可。这又双叒一次证明大漠根本没有跑过vue-cli 生成的项目。

• 从对集成测试的支持大家应该可以看出来，在那些技术含量不太高的地方，Vue确实可以抄袭得有模有样，但是一旦技术门槛提高，Vue就没法抄了，或者说抄得没那么快了。

—— 集成测试这种东西，有什么技术门槛可言，还需要抄么？顺便说一句，vue-cli 初始化的项目可是早比 @angular/cli 正式发布前就已经自带集成测试了...