=========================================================================

我们既然使用idea,当然需要一些配置，不使用idea 的可以忽略。

1、我们打开settings 下载vue.js 插件，然后重启。打开我们创建的项目zlflovemmVue

2、配置js 版本 ECMAScript6

3、HTML 增加 .vue 支持

4、启动项目，在edit Configurations 中增加npm 启动，配置如下图：

配置好后，我们来启动就好啦，如下图就表示启动成功啦。

我们启动成后，在浏览器上输入：

http://localhost:8081

证明我们项目已经初始化搭建完成啦。到这里我们已经完成了第一步。但是可以看到我们到现在为止还没有开始写代码，也不知道如何下手写。

不要急，我们前面这些工作做好后，我们接下来就开始啦。

项目结构

===================================================================

虽然我们项目稀里糊涂的启动起来了，但是相比到此的小伙伴还是一头雾水，在那写我们的代码呢？整个流程是怎么样的呢？

在写代码之前，我们还是先来看看，vue-cli 初始化为我们创建的项目有哪些东西。

▸ build/ // 编译用到的脚本

▸ config/ // 各种配置

▸ dist/ // 打包后的文件夹

▸ node_modules/ // node第三方包

▸ src/ // 源代码

▸ static/ // 静态文件, 暂时无用

index.html // 最外层文件

package.json // node项目配置文件

build

---

保留各种打包脚本。不可或缺，不要随意修改。

展开后如下：

▾ build/

build.js //打包使用， 不要修改。

check-versions.js //检查npm的版本， 不要修改。

dev-client.js //是在开发时使用的服务器脚本。不要修改。

dev-server.js //同上

utils.js // 不要修改。 做一些css/sass 等文件的生成。

vue-loader.conf.js //非常重要的配置文件，不要修改。内容是用来辅助加载vuejs用到的css source map等内容。

webpack.base.conf.js //下面这三个都是基本的配置文件。不要修改

webpack.dev.conf.js

webpack.prod.conf.js

我们初学者阶段，暂时不用管这些，也不改这些东西。

config

---

上图我们可以看到config 目录中就有

▾ config/

dev.env.js

index.js

prod.env.js

test.env.js

dev.env.js 开发模式下的配置文件，一般不用修改。

prod.env.js 生产模式下的配置文件，一般不用修改。

test.env.js 测试模式下的配置文件，一般不用修改。

index.js 很重要的文件， 定义了 开发时的端口（默认是8080），定义了图片文件夹（默认static)， 定义了开发模式下的 代理服务器. 我们修改的还是比较多的。

node_modules

---

node项目所用到的第三方包，特别多，特别大。 $ npm install 所产生。

这个文件夹不要放到git中

src

---

最最核心的源代码所在的目录。我们要写的代码就是写在这个里面啦。

▾ src/

▾ assets/

logo.png

▾ components/

Hello.vue

▾ router/

index.js

App.vue

main.js

assets: 用到的图片

components: 用到的"视图"和"组件"所在的文件夹。（最最核心）

router/index.js 路由文件。 定义了各个页面对应的url.

App.vue 如果index.html 是一级页面模板的话，这个App.vue就是二级页面模板。 所有的其他vuejs页面，都作为该模板的 一部分被渲染出来。

main.js 废代码。没有实际意义，但是为了支撑整个vuejs框架，存在很必要。

Hello World

==========================================================================

好啦，我们已经知道了项目的结构了，现在就要开始实现我们自己的hello world 啦。不然我们当程序员还有什么意义。

其实我们程序已经帮我们写了一个helloworld 。但是我们还是自己来创建一个，这样自己才能熟悉点。最终添加的内容图如下：

Hello.vue

---

我们在src–components 新建Hello.vue 。内容如下:

{{message}}

可以看到内容很简单，就是返回一个hello world 。

修改index.js

---

接下来我们在src–router–index.js 中增加一个路由。

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-gu7zzK69-1719238254957)]