赞
踩
之所以取这个标题,是因为本文来自内部培训的整理,培训的对象是公司的 .NET 程序员,.NET 程序员学习 Vue 是为了在项目中做二次开发时能够更好地跟产品对接。
Vue 是现在比较流行的前端框架,也是非常容易入门的前端框架,花几个小时看看官方文档基本就入门,如果连官方文档都懒得看,那本文或许对您有所帮助。
开发一个站点最基本的知识点,我认为有以下几个:
页面组装
页面跳转
页面传值
接口调用
.NET 程序员通常会采用 Asp.Net 或 Asp.Net MVC 来开发网站,对于上面四点,在 .NET 中的对应关系如下:
知识点 | Asp.Net | Asp.Net MVC |
---|---|---|
页面组装 | Aspx页面、用户控件、MasterPage | 视图、分部视图 |
页面跳转 | 链接、Redirect | 路由 |
页面传值 | QueryString、Session等 | ViewBag、ViewData等 |
接口调用 | Ajax | Ajax |
在 Vue 中、使用「组件」来组装页面,使用「路由」来做页面的跳转,传值分为「路由参数」和「组件之间的通讯」,接口的调用使用官方推荐的「axios」。
下面以一个简单的登录示例来讲解上面说到的一些知识点。
首先安装 nodejs ,可以在http://nodejs.cn/download/找到相关的版本进行安装。
Vue的使用有两种模式,直接引用 Vue 的 js 文件,或者使用脚手架生成完整的项目框架,这里我们使用脚手架的方式,使用下面命令进行安装
npm install -g @vue/cli
使用下面命令创建名为 hello-world 的应用
vue create hello-world
Vue 创建应用时分为默认模式和手动模式,这里我们选择默认模式
创建完成后,项目的目录结构如下
public:public中的静态资源会复制到最终打包的dist目录中
src:编写代码主要要操作的目录
src/assets:存放静态资源,如图片、字体等
src/components:组件目录
src/App.vue:根组件
src/main.js:入口文件
下面的一些配置文件可以暂时不做深入研究
在命令行输入npm run serve
,运行起来后,在浏览器中输入http://localhost:8080,就可以访问站点了。
作为一个.NET
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。