企业网站模板php,深夜禁用直播app软件,策划方案,店面设计招聘文章目录一、使用idea Vue插件生成项目结构1.1. Create New Project1.2. 设置项目地址1.3. 确认项目名称1.4. 项目描述1.5. 作者信息1.6. 编译模板1.7. 安装路由二、安装node_modules模块三、启动项目四、Vue 项目结构分析4.1. 概览4.2. index.html4.3. App.vue4.4. main.js4.5…
文章目录一、使用idea Vue插件生成项目结构1.1. Create New Project1.2. 设置项目地址1.3. 确认项目名称1.4. 项目描述1.5. 作者信息1.6. 编译模板1.7. 安装路由二、安装node_modules模块三、启动项目四、Vue 项目结构分析4.1. 概览4.2. index.html4.3. App.vue4.4. main.js4.5. 项目源码一、使用idea Vue插件生成项目结构
这里注意 Project location 需要输入到项目文件夹一级而不是 Workspace。输入完成后点击 Next等待 Vue CLI 初始化然后在可视化界面上确认项目信息修改或 Next 即可。
1.1. Create New Project
对于习惯使用 IDE 的同学可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例点击 Create New Project然后选择 Static Web - Vue.js点击 next输入相关参数
1.2. 设置项目地址 1.3. 确认项目名称 1.4. 项目描述 1.5. 作者信息 1.6. 编译模板 1.7. 安装路由 二、安装node_modules模块
IDEA 构建出的 Vue 项目是不含 node_modules 的所以要先调出终端执行 npm install如果有可跳过。
三、启动项目
执行命令npm run dev 另外 IDE 嘛总是在 UI 上下了很多功夫我们还可以在 package.json 文件上点击右键选择 show npm scripts 然后就会出来 npm 命令窗口想要执行哪个命令直接双击运行就可以了。 这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的start 即是执行 npm run dev 命令 另外使用这种方法可以激活 IDE 右上角的按钮 上面的内容应该足够详细了如果大家还是遇到了问题可以在评论区反馈一下我会第一时间解答。
四、Vue 项目结构分析
4.1. 概览
使用 CLI 构建出来的 Vue 项目结构是这个样子的 里面我们需要关注的内容如下图重点需要关注的我用小红旗标了出来 其中我们最常修改的部分就是 components 文件夹了几乎所有需要手动编写的代码都在其中。
接下来我们分析几个文件目的是理解各个部分是怎么联系到一起的。
4.2. index.html
首页文件的初始代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0titlemy-vue-test/title/headbodydiv idapp/div!-- built files will be auto injected --/body
/html就是一个普普通通的 html 文件让它不平凡的是 div idapp/div 下面有一行注释构建的文件将会被自动注入也就是说我们编写的其它的内容都将在这个 div 中展示。
还有不普通的一点是整个项目只有这一个 html 文件所以这是一个 单页面应用当我们打开这个应用表面上可以有很多页面实际上它们都只不过在一个 div 中。
4.3. App.vue
上面图上我把这个文件称为“根组件”因为其它的组件又都包含在这个组件中。
.vue 文件是一种自定义文件类型在结构上类似 html一个 .vue 文件即是一个 vue 组件。先看它的初始代码
templatediv idappimg src./assets/logo.pngrouter-view//div
/templatescript
export default {name: App
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
大家可能注意到了这里也有一句 div idapp但跟 index.html 里的那个是没有关系的。这个 idapp 只是跟下面的 css 对应。
script标签里的内容即该组件的脚本也就是 js 代码export default 是 ES6 的语法意思是将这个组件整体导出之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。
这个文件最关键的一点其实是第四行 router-view/是一个容器名字叫“路由视图”意思是当前路由 URL指向的内容将显示在这个容器中。也就是说其它的组件即使拥有自己的路由URL需要在 router 文件夹的 index.js 文件里定义也只不过表面上是一个单独的页面实际上只是在根组件 App.vue 中。
4.4. main.js
前面我们说 App.vue 里的 div idapp 和 index.html 里的 div idapp 没有关系那么这两个文件是怎么建立联系的呢让我们来看入口文件 main.js 的代码
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import router from ./routerVue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,router,components: { App },template: App/
})
这里插一嘴这个 js 文件有的同学可能看着不顺眼比如没有分号;因为是 ES6 的语法不这么写反而会提示错误虽说可以把 es-lint 改了或者关了但我想熟悉一下新的规则也挺好。
最上面 import 了几个模块其中 vue 模块在 node_modules 中App 即 App.vue 里定义的组件router 即 router 文件夹里定义的路由。
Vue.config.productionTip false ,作用是阻止vue 在启动时生成生产提示。
在这个 js 文件中我们创建了一个 Vue 对象实例el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标router 代表该对象包含 Vue Router并使用项目中定义的路由。components 表示该对象包含的 Vue 组件template 是用一个字符串模板作为 Vue 实例的标识使用类似于定义一个 html 标签。
看完了以上三个文件我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。
4.5. 项目源码
