中国建设银行个人网站,电脑手机自适应网站的建设,长春关键词优化,品牌网站建设4a小蝌蚪一#xff0c;何为SPA SPA#xff08;Single Page Application#xff09;是一种 Web 应用程序的开发模式#xff0c;它通过使用 AJAX 技术从服务器异步加载数据#xff0c;动态地更新页面内容#xff0c;实现在同一个页面内切换不同的视图#xff0c;而无需整页刷新 1.…一何为SPA SPASingle Page Application是一种 Web 应用程序的开发模式它通过使用 AJAX 技术从服务器异步加载数据动态地更新页面内容实现在同一个页面内切换不同的视图而无需整页刷新 1.1 构建SPA前提
nodeJS环境已经搭建完毕 没有搭建可以看----》》点击node.js坏境搭建
终端命令输入下行代码 查看安装是否成功 node -v 《---node.js版本 npm -v 《---npm.版本 二Vue-cli
2.1 为何Vue-cli 是 Vue.js 官方提供的一个命令行工具它可以帮助你快速搭建和管理 Vue 项目。Vue CLI 提供了一些便捷的开发工具和功能使得开发者可以更高效地构建 Vue.js 应用程序 简单来说 vue-cli是vue.js的脚手架用于自动生成vue.jswebpack的项目模板 2.2 安装Vue-cli 在终端命令窗口输入 npm install -g vue-cli npm install webpack -g 在上篇文章已经执行过该命令过搭建过会生成上方图片的webpack文件夹。 2.2 Vue-cli的实现功能方面 创建项目 你可以使用 Vue CLI 创建一个新的 Vue 项目它会为你生成一个基本的项目结构以及一些默认的配置文件。 配置管理 Vue CLI 通过提供一套可视化的配置界面让你可以轻松地管理项目的配置。你可以通过修改配置文件或者在可视化界面上进行操作来自定义项目的构建流程、插件和依赖等。 开发服务器 Vue CLI 提供了一个开发服务器可以在开发过程中自动编译和热更新你的代码。这样你可以实时预览你的应用程序无需手动刷新页面。 插件体系 Vue CLI 支持插件你可以通过安装和配置插件来扩展项目的功能和特性。Vue CLI 官方提供了一些常用的插件比如 Vuex、Vue Router 等也支持自定义插件。 构建和部署 Vue CLI 封装了 Webpack可以方便地构建和打包你的项目。它提供了构建命令可以将你的代码优化、压缩并生成最终的生产版本。你可以将构建好的文件部署到服务器上以供用户访问 三Vue-cli构建SPA项目 步骤1 在你想要创建SPA工作区间打开终端命令口输入下行代码 ① vue init webpack xxx 注1xxx 为自己创建项目的名称 注2必须先安装vue,vue-cliwebpacknode等一些必要的环境 ② 等待完毕之后进入“一问一答”模式(9个问题) 根据下列操作来即可 1.Project name项目名默认是输入时的那个名称xxx直接回车 2.Project description项目描述直接回车 3.Author作者随便填或直接回车 4.Vue build选择题一般选第一个 4.1Runtime Compiler: recommended for most users//运行加编译官方推荐就选它了(键盘上下键选择) 4.2Runtime-only: about 6KB lighter mingzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时已经有推荐了就选择第一个了 5.Install vue-router是否需要vue-routerY选择使用这样生成好的项目就会有相关的路由配置文件 6.Use ESLint to lint your code是否用ESLint来限制你的代码错误和风格。N 新手就不用了但实际项目中一般都会使用这样多人开发也能达到一致的语法 7.Set up unit tests是否安装单元测试 N 8.Setup e2e tests with Nightwatch?是否安装e2e测试 N 9.Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM (键盘上下键选择) 选择完毕后的图例 当跳第3点可以SPA就已经创建成功了。可在你想要创建SPA工作区间看见。 打开HBuilder,导入该SPA项目 步骤二 运行完上面的命令后我们需要将当前路径改变到SPA这个文件夹内然后安装需要的模块继续输入 cd xxx #改变路径到spa1文件夹下 注xxx是你创建的项目名 npm install #安装所有项目需要的npm模块(可不要) 步骤三 ## 此步骤可理解成启动tomcat并通过浏览器访问项目 继续输入下行命令 npm run dev 启动项目 等待完毕后显示一个hppt....8080路径选择鼠标右键即可复制到浏览器访问即可以下图片 三SPA项目完成路由 3.1 vue项目结构说明 build文件夹 这个文件夹主要是进行webpack的一些配置 webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖 webpack.dev.conf.js webpack开发环境配置 webpack.prod.conf.js webpack生产环境配置 build.js 生产环境构建脚本 vue-loader.conf.js 此文件是处理.vue文件的配置文件 config文件目录下 dev.env.js 配置开发环境 prod.env.js 配置生产环境 index.js 这个文件进行配置代理服务器例如端口号的修改 node_modules文件 存放npm install时根据package.json配置生成的npm安装包的文件夹 src文件夹 源码目录(开发中用得最多的文件夹) assets 共用的样式、图片 components 业务代码存放的地方里面分成一个个组件存放一个页面是一个组件一个页面里面还会包着很多组件 router 设置路由 App.vue vue文件入口界面 main.js 对应App.vue创建vue实例也是入口文件对应webpack.base.config.js 里的入口配置 static文件夹 存放的文件不会经过webpack处理可以直接引用例如swf文件如果要引用可以在webpack配置 对swf后缀名的文件处理的loader也可以直接将swf文件放在这个文件夹引用 package.json 这个文件有两部分是有用的scripts 里面设置命令以及在dependencies和devDependencies中分别对应全局下载和局部下载的依赖包 3.2 什么是*.vue文件 *.vue 文件是一个自定义的文件类型用类似HTML的语法描述一个Vue组件。 每个.vue文件包含三种类型的顶级语言块 template, script 和 style。 这三个部分分别代表了 html,js,css。 3.3 实现路由案例(7步骤) 1.引入js依赖main.js中已经完成我们无需自己引入2.定义组件呈现形式以.vue文件展示 template标签中定义组件内容 通过export defalut指定组件的名字 One.vue页面代码 templatedivspan stylecolor: red;我是第一第一第一/span/div
/templatescript
export default {name: One,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style Tow.vue代码 templatedivspan stylecolor: aqua;我是第二第二第二/span/div
/templatescript
export default {name: Tow,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style 3.定义路由与组件的对应关系在router/index.js文件中定义 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import One from /components/One
import Tow from /components/TowVue.use(Router)export default new Router({routes: [{path: /,name: One,component: One},{path: /One,name: One,component: One},{path: /Tow,name: Tow,component: Tow}]
})4.获取路由对象main.js中也完成了这一步骤 5.挂载实例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/
})6.定义锚点App.vue使用router-view 7.触发事件App.vue使用router-link to templatediv idapp!-- img src./assets/logo.png --router-link to/One首页/router-linkrouter-link to/Tow关于/router-linkrouter-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三SPA完成嵌套路由 ①定义组件 创建两个子组件 父组件: templatediv我是首页br /router-link to/OneME关于站长/router-linkrouter-link to/OneWebsite关于本站/router-link/div
/templatescript
export default {name: One,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style 两个子组件 OneME: templatediv我是首页br /router-link to/OneME关于站长/router-linkrouter-link to/OneWebsite关于本站/router-link/div
/templatescript
export default {name: One,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style OneWebsite templatediv这是站长的简介/div
/templatescript
export default {name: OneME,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style ②定义路由与配置路由路径 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import One from /components/One
import OneME from /components/OneME
import OneWebsite from /components/OneWebsite
import Tow from /components/TowVue.use(Router)export default new Router({routes: [{path: /,name: One,component: One},{path: /One,name: One,component: One},{path: /Tow,name: Tow,component: Tow,children:[{path: /OneME,name: OneME,component: OneME},{path: /OneWebsite,name: OneWebsite,component: OneWebsite}]}]
})④定义触发路由的按钮 templatediv idapp!-- img src./assets/logo.png --router-link to/One首页/router-linkrouter-link to/Tow关于/router-linkrouter-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
