app网站做二手交易,深圳网站设计电话,网站建设的工作计划,网络开发文章目录 1.创建vue项目1.1.自定义创建项目1.2.项目结构解析1.3.主要文件1.4.其它 2.项目运行3.Vue组件概念3.1.组件基础概念3.2.单文件组件三要素3.3.组件注册3.4.组件通信 4.Vue路由概念4.1.简单使用4.2.路由参数4.3.嵌套路由4.4.路由导航4.5.代码导航4.6.路由守卫 5.总结 HT… 文章目录 1.创建vue项目1.1.自定义创建项目1.2.项目结构解析1.3.主要文件1.4.其它 2.项目运行3.Vue组件概念3.1.组件基础概念3.2.单文件组件三要素3.3.组件注册3.4.组件通信 4.Vue路由概念4.1.简单使用4.2.路由参数4.3.嵌套路由4.4.路由导航4.5.代码导航4.6.路由守卫 5.总结 HTML 中的 attribute 名是大小写不敏感的所以浏览器会把所有大写字符解释为小写字符所以在模板中不能直接使用camelCase (驼峰命名法) 的 prop myNamemyAge需要使用其等价的 kebab-case (短横线分隔命名) 命名。 1.创建vue项目
可以使用包创建也可是使用webstorm之类的工具创建。如下图所示
1.1.自定义创建项目
命令行自定义安装。使用包命令创建 最后一个为项目名称。
vue init webpack vuedemo01文件夹目录结构如下图所示 如果想要在webstorm中启动如下图所示配置即可 dev 是根据package.json文件里的脚本名称而来如果不是dev 那么 npm run dev 命令就是npm run serve 这样。如下图所示
1.2.项目结构解析
├── build --------------------------------- 项目构建(webpack)相关配置文件配置参数什么的一般不用动
│ ├── build.js --------------------------webpack打包配置文件
│ ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│ ├── dev-client.js ---------------------------------- 设置环境
│ ├── dev-server.js ---------------------------------- 创建express服务器配置中间件启动可热重载的服务器用于开发项目
│ ├── utils.js --------------------------------------- 配置资源路径配置css加载器
│ ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│ ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置目录包括端口号等。我们初学可以使用默认的。
│ ├── dev.env.js -------------------------- 开发环境变量
│ ├── index.js ---------------------------- 项目配置文件
│ ├── prod.env.js ------------------------- 生产环境变量
│ ├── test.env.js ------------------------- 测试环境变量
├── node_modules ---------------------------- npm 加载的项目依赖模块
├── src ------------------------------------- 我们要开发的目录基本上要做的事情都在这个目录里。
│ ├── assets ------------------------------ 静态文件放置一些图片如logo等
│ ├── components -------------------------- 组件目录存放组件文件可以不用。
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 项目入口组件我们也可以直接将组件写这里而不使用 components 目录。
│ ├── router ------------------------------ 路由
├── static ---------------------------- 静态资源目录如图片、字体等。
├── index.html ------------------------------ 首页入口文件你可以添加一些 meta 信息或统计代码啥的。
├── package.json ---------------------------- node配置文件记载着一些命令和依赖还有简要的项目描述信息
├── .README.md------------------------------- 项目的说明文档markdown 格式。想怎么写怎么写不会写就参照github上star多的项目看人家怎么写的
├── .xxxx文件这些是一些配置文件包括语法配置git配置等
│ ├── .babelrc--------------------------------- babel配置文件
│ ├── .editorconfig---------------------------- 编辑器配置
│ ├── .eslintignore------------------------------- 配置需要或略的路径一般build、config、dist、test等目录都会配置忽略
│ ├── .eslintrc.js ------------------------------- 配置代码格式风格检查规则
│ ├── .gitignore------------------------------- 配置git可忽略的文件
│ ├── .postcssrc.js ------------------------------- css转换工具
1.3.主要文件
index.html——[主页] index.html如其他html一样但一般只定义一个空的根节点在main.js里面定义的实例将挂载在根节点下内容都通过vue组件来填充。
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0titlevuedemo01/title/headbodydiv idapp/div!-- built files will be auto injected --/body
/htmlApp.vue——[根组件] 一个vue组件通常由三部分组成:模板(template)、js(script)、样式(style)。
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
main.js——[入口文件] main.js主要是引入vue框架根组件及路由设置并且定义vue实例下面的components:{App}就是引入的根组件App.vue。 后期还可以引入插件当然首先得安装插件。全局js文件撰写的地方在此添加js代码。
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/
})router——[路由配置] vue-router是Vue.js官方的路由插件它和vue.js是深度集成的适合用于构建单页面应用。vue的单页面应用是基于路由和组件的路由用于设定访问路径并将路径和组件映射起来。 router文件夹下有一个index.js即为路由配置文件。
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldVue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld}]
})1.4.其它
可以关闭校验规则实际使用起来比较麻烦在index.js中关闭
useEslint: false,2.项目运行
命令行定位到项目总目录运行如下命令即可启动。
npm run dev3.Vue组件概念
3.1.组件基础概念
官方定义组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素封装可重用的代码。在较高层面上组件是自定义元素 Vue.js 的编译器为它添加特殊功能。在有些情况下组件也可以是原生 HTML 元素的形式以 is 特性扩展。 组件机制的设计可以让开发者把一个复杂的应用分割成一个个功能独立组件降低开发的难度的同时也提供了极好的复用性和可维护性。组件的出现就是为了拆分Vue实例的代码量的能够让我们以不同的组件来划分不同的功能模块将来我们需要什么样的功能就可以去调用对应的组件即可。 可复用组件高内聚、低耦合。Vue中提供了少量的内置组件(keep-alive、component、transition、transition-group等)但可以自定义组件。Vue API中提供了Vue.extend和Vue.component两个全局方法创建/注册组件还有一个实例选项components用来注册局部组件。
var myVue Vue.extend({template: div{{ name }} - {{ age }} - {{ sex }}/div,data: function () {return {name: 小明,age: 19,sex: 男};}
});
var extends1 new myVue().$mount(#app);//挂载组件3.2.单文件组件三要素 1template用于展示视图template模板反映了数据和最终展现给用户的DOM之间的映射关系注template/template一般只有一个div根元素vue初始化之后最终会得到一个vdom树而树结构必须要求只有一个root节点 2script用于和用户交互 3style用于控制视图的样式。 在Vue中template模板是用于编写视图(DOM)的地方template/template一般只有一个根元素通常根元素都是div。如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素template标签不支持v-show指令v-showfalse对template标签来说不起作用。
template!--一般情况下只有一个根节点,且必须有一个根节点--div!-- view --/div
/templatevue中的script脚本中包含两部分导出和导入。 style里和传统的css差不多不同的是支持了更多的语法比如scss、less、stylus等默认是css。
!--样式默认:langcss--
!--添加“scoped”-作用域属性将CSS仅限于此组件--
style scoped
/style3.3.组件注册
全局注册在main.js文件中进行全局注册。 Vue.component( id, [definition] ) // 注册组件传入一个扩展过的构造器
Vue.component(my-component, Vue.extend({ /* ... */ }))// 注册组件传入一个选项对象 (自动调用 Vue.extend)
Vue.component(my-component, { /* ... */ })// 获取注册的组件 (始终返回构造器)
var MyComponent Vue.component(my-component)全局注册组件范例 修改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 ./routerlet head Vue.extend({template: pThis is a head component!/p
})
Vue.component(tab-home, head)Vue.component(tab-new, {template: divThis is a News component/div
})Vue.component(tab-foot, {template: divThis is a Foot component/div
})
/* eslint-disable no-new */
new Vue({el: #app,router,components: { App },template: App/
})修改App.vue组件
templatediv idapph1Hello App!/h1tab-home/tab-hometab-new/tab-newtab-foot/tab-foot/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局部注册组件 通过某个Vue实例/组件的实例选项 components 注册使用该选项注册的组件被称为局部注册。如下所示的my-component。
template idggpThis is a advertisement component!/p
/templatescriptexport default {name: HelloWorld,components: {my-component: {template: #gg}}}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
/style3.4.组件通信
组件与组件之间的嵌套使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢组件间数据传递不同于Vue全局的数据传递组件实例的数据之间是孤立的不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件就需要使用props属性。在Vue中父子组件的关系可以总结为prop向下传递事件向上传递。父组件通过prop给子组件下发数据子组件通过事件给父组件发送消息。所以我们也会经常遇到组件之间需要传递数据的时候大致分为四种情况
父组件向子组件传递数据通过 props 传递数据。 子组件向父组件传递数据通过 events自定义事件-回调参数 传递数据。 两个同级组件兄弟组件之间传递数据通过 EventBus 事件总线-只适用于极小的项目、Vuex官方推荐传递数据。详细内容通过另外文章进行介绍
4.Vue路由概念
路由是指应用程序中的一个页面。在 Vue 中路由通常由一个组件表示。路由器是一个 JavaScript 对象用于实现路由。在 Vue 中路由器通常由 Vue Router 实现。路由表是一个定义应用程序中所有路由的 JavaScript 对象。路由表指定了每个路由的路径、组件和其他参数。路由参数是指在路由路径中的动态部分。路由参数可以通过 $route.params 对象访问。
4.1.简单使用
在创建 Vue 应用程序之前你需要创建一个路由表。路由表是一个 JavaScript 对象用于定义应用程序中的所有路由。
// src/router/index.jsimport Vue from vue;
import Router from vue-router;
import Home from /views/Home.vue;
import About from /views/About.vue;Vue.use(Router);export default new Router({mode: history,routes: [{path: /,name: home,component: Home,},{path: /about,name: about,component: About,},],
});
在上面的代码中我们创建了一个名为 index.js 的文件并在其中定义了一个路由表。该路由表由两个路由组成一个用于主页路径为 /和一个用于关于页面路径为 /about。每个路由都指定了一个名称、一个组件以及其他参数例如路径。
4.2.路由参数
路由参数是指在路由路径中的动态部分。例如在以下路由中
{path: /users/:id,component: User,
}:id 是一个路由参数。你可以通过 $route.params.id 访问该参数的值。例如如果 URL 是 /users/123则 $route.params.id 的值将是 123。
4.3.嵌套路由
嵌套路由是指一个路由中包含另一个路由。例如以下路由表定义了一个名为 User 的父路由和一个名为 Profile 的子路由
{path: /user/:id,component: User,children: [{path: profile,component: Profile,},],
}在上面的代码中User 路由包含一个名为 Profile 的子路由。当导航到 /user/:id/profile 时将渲染 Profile 组件。
4.4.路由导航
在 Vue 中路由导航是指在路由之间进行切换。你可以使用 元素或编程方式导航到一个路由。元素是一个 Vue 组件它允许你在应用程序中创建链接。例如
router-link to/Home/router-link
router-link to/aboutAbout/router-link在上面的代码中我们使用元素创建了两个链接一个指向主页一个指向关于页面。
4.5.代码导航
你也可以使用编程式导航在路由之间进行切换。要导航到一个路由你可以使用 $router.push() 方法。例如
this.$router.push(/);在上面的代码中我们使用 $router.push() 方法将当前路由切换到主页。
4.6.路由守卫
1.全局守卫 路由守卫是指在路由导航期间执行的操作。你可以使用路由守卫来控制路由导航、检查用户身份验证以及执行其他操作。全局路由守卫是指在所有路由导航期间执行的操作。你可以使用全局路由守卫来执行通用操作例如检查用户是否已登录。
const router new VueRouter({ ... });router.beforeEach((to, from, next) {// 检查用户是否已登录if (!isAuthenticated to.path ! /login) {next(/login);} else {next();}
});
在上面的代码中我们使用 router.beforeEach() 方法注册了一个全局路由守卫。该守卫检查用户是否已登录如果没有登录则将路由导航到登录页面。
2.局部守卫 路由局部守卫是指在单个路由导航期间执行的操作。你可以使用路由独享守卫来控制单个路由的导航。
const router new VueRouter({routes: [{path: /dashboard,component: Dashboard,beforeEnter: (to, from, next) {// 检查用户是否有权限访问该路由if (!hasPermission) {next(/unauthorized);} else {next();}},},],
});
3.组件内守卫 组件内守卫是指在组件导航期间执行的操作。你可以使用组件内守卫来控制组件的导航。
export default {beforeRouteEnter(to, from, next) {// 在进入该组件之前执行操作next();},beforeRouteLeave(to, from, next) {// 在离开该组件之前执行操作next();},
};
在上面的代码中我们在一个组件中使用了 beforeRouteEnter 和 beforeRouteLeave 守卫。这些守卫允许我们在进入和离开该组件之前执行操作。
5.总结
Vue的组件渲染目标视图或者局部视图它的路由是对各种访问路径的控制生成目标渲染结果。
