VUE入门总结

清疚 2022-05-22 02:53 162阅读 0赞

1、vue脚手架生成

ue init webpack   xxxx

![70][]

vue配置出现问题一般方式：

a)重新生成一个脚手架

b)将老的代码拷贝到新脚手架中

2>ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

初学者一开始学习 JavaScript，其实就是在学 3.0 版的语法。

Node 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。使用下面的命令，可以查看 Node 已经实现的 ES6 特性。

$ node --v8-options | grep harmony

[Babel][] 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

3、vue中export语法

`export`语句用于在创建JavaScript模块时，从模块中导出函数、对象或原始值，以便其他程序可以通过 [`import`][import] 语句使用它们。

详见：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Statements_export]

4、Vue 入门之项目目录结构介绍

├── index.html                      入口页面
        ├── build                           构建脚本目录
        │   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面
        │   ├── build.js                        生产环境构建脚本
        │   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
        │   ├── dev-server.js                   运行本地开发服务器
        │   ├── utils.js                        构建相关工具方法
        │   ├── webpack.base.conf.js            wabpack基础配置
        │   ├── webpack.dev.conf.js             wabpack开发环境配置
        │   └── webpack.prod.conf.js            wabpack生产环境配置
        ├── config                          项目配置
        │   ├── dev.env.js                      开发环境变量
        │   ├── index.js 项目配置文件
        │   ├── prod.env.js                     生产环境变量
        │   └── test.env.js                     测试环境变量
        ├── mock                            mock数据目录
        │   └── hello.js
        ├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
        ├── src                             项目源码目录    
        │   ├── main.js                         入口js文件
        │   ├── app.vue                         根组件
        │   ├── components                      公共组件目录
        │   │   └── title.vue
        │   ├── assets                          资源目录，这里的资源会被wabpack构建
        │   │   └── images
        │   │       └── logo.png
        │   ├── routes                          前端路由
        │   │   └── index.js
        │   ├── store                           应用级数据（state）
        │   │   └── index.js
        │   └── views                           页面目录
        │       ├── hello.vue
        │       └── notfound.vue
        ├── static                          纯静态资源，不会被wabpack构建。
        └── test                            测试文件目录（unit&e2e）
            └── unit                            单元测试
                ├── index.js                        入口脚本
                ├── karma.conf.js                   karma配置文件
                └── specs                           单测case目录
                    └── Hello.spec.js

说明：主要是红字的部分

1)、src/main.js是入口文件

2)、src/app.vau是根组件的定义

3)、公共组件在src/components下

4)、src/router/index.js下是路由配置

5)、config/index.js下为配置文件，启动监听localhost还是所有ip需要更改这个文件

5、npm安装原理

npm的原理大概就是从当前目录往上找，找到哪个目录有node\_modules就认为这才是真正的项目目录，所以东西全给装那里面去  
所以不仅仅是User根目录的问题，你得保证从你当前的目录开始一直到根目录都没有node\_modules，npm才会“正常”地把东西放到当前目录下的node\_modules里

6、前端技术的本质：

这个世界上有茫茫多的这类业务，总是会催促人使用更有效率的工具来实现所需的界面展示效果。现有的前端技术发展潮流代表着什么？其实还是一个效率更替的问题。

7、参考文档：

### ECMAScript 6 入门  [http://es6.ruanyifeng.com/?search=import&x=0&y=0][http_es6.ruanyifeng.com_search_import_x_0_y_0] ###

vue和react 相似和区别  [https://blog.csdn.net/baidongying/article/details/79484599][https_blog.csdn.net_baidongying_article_details_79484599]

vue和webpack   [http://jiongks.name/blog/just-vue/][http_jiongks.name_blog_just-vue]

### JavaScript中的Map、Set及其遍历 [https://www.cnblogs.com/weilan/p/7002088.html][https_www.cnblogs.com_weilan_p_7002088.html]  ###

JavaScript 标准参考教程（alpha）  [http://javascript.ruanyifeng.com/][http_javascript.ruanyifeng.com]  
JavaScript 入门哪本书最好？  [https://segmentfault.com/q/1010000002706634][https_segmentfault.com_q_1010000002706634]  
element-ui文档     [http://element.eleme.io/\#/zh-CN/component/container][http_element.eleme.io_zh-CN_component_container]  
Vue 入门之项目目录结构介绍  [https://blog.csdn.net/xiangzhihong8/article/details/80384237][https_blog.csdn.net_xiangzhihong8_article_details_80384237]  
vue学习之路（二）vue-cli目录结构分析 [https://zhuanlan.zhihu.com/p/33988422][https_zhuanlan.zhihu.com_p_33988422]

Vue 入门之项目目录结构介绍 [https://blog.csdn.net/xiangzhihong8/article/details/80384237][https_blog.csdn.net_xiangzhihong8_article_details_80384237]

腾讯web开发团队：  http://imweb.io/  
大前端bbs： http://www.html-js.com/

## ##

[70]: /images/20220522/85c955f1ab324faba6faba3f362cd503.png
[Babel]: https://babeljs.io/
[import]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Statements_export]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
[http_es6.ruanyifeng.com_search_import_x_0_y_0]: http://es6.ruanyifeng.com/?search=import&x=0&y=0
[https_blog.csdn.net_baidongying_article_details_79484599]: https://blog.csdn.net/baidongying/article/details/79484599
[http_jiongks.name_blog_just-vue]: http://jiongks.name/blog/just-vue/
[https_www.cnblogs.com_weilan_p_7002088.html]: https://www.cnblogs.com/weilan/p/7002088.html
[http_javascript.ruanyifeng.com]: http://javascript.ruanyifeng.com/
[https_segmentfault.com_q_1010000002706634]: https://segmentfault.com/q/1010000002706634
[http_element.eleme.io_zh-CN_component_container]: http://element.eleme.io/#/zh-CN/component/container
[https_blog.csdn.net_xiangzhihong8_article_details_80384237]: https://blog.csdn.net/xiangzhihong8/article/details/80384237
[https_zhuanlan.zhihu.com_p_33988422]: https://zhuanlan.zhihu.com/p/33988422