织梦确定网站风格,成都金牛网站建设公司,个人优秀网页设计图片,wordpress虚拟机修改密码目录
一、什么是vue-cli
二#xff0c;构建SPA项目
三、 运行SPA项目 前言#xff1a; 在我们搭建SPA项目时候#xff0c;我们必须去检查我们是否搭建好NodeJS环境 cmd窗口输入以下指令#xff1a;去检查 node -v npm -v 一、什么是vue-cli Vue CLI#xff08;Vu…
目录
一、什么是vue-cli
二构建SPA项目
三、 运行SPA项目 前言 在我们搭建SPA项目时候我们必须去检查我们是否搭建好NodeJS环境 cmd窗口输入以下指令去检查 node -v npm -v 一、什么是vue-cli Vue CLIVue Command Line Interface是一个官方提供的用于快速搭建 Vue.js 项目的脚手架工具。它提供了一套命令行工具可以帮助开发者创建、配置和管理 Vue.js 项目。 使用 Vue CLI你可以快速初始化一个基于 Vue.js 的项目结构自动生成一些默认配置和目录结构。它还集成了许多常用的开发工具和插件如webpackBabelESLint等使得开发者可以更方便地进行开发、编译和打包等工作。 Vue CLI 不仅提供了一系列默认模板还支持自定义配置使得开发者可以根据自己的需求对项目进行定制化。同时它还支持插件扩展机制可以通过插件来添加特定功能或扩展工具链。 二构建SPA项目
1.1为啥要搭建SPA项目 更好的用户体验SPA 可以在页面加载后通过异步加载数据和局部更新来提供更流畅的用户体验。用户在导航页面时不需要重新加载整个页面只需要更新相关的组件或数据。 更快的页面加载速度由于SPA只需要加载一次初始页面之后的页面切换只需要加载数据因此相比传统的多页应用可以提供更快的页面加载速度。 独立性和松耦合SPA 将前端应用划分为多个模块或组件使得代码更易于维护和调试。不同模块之间可以独立开发、测试和部署减少了对整个系统的影响。 跨平台支持由于SPA 基本上是使用 HTML、CSS 和 JavaScript 构建的可以轻松地在多个平台和设备上运行包括桌面浏览器、移动浏览器和混合移动应用。 更好的扩展性由于SPA 的模块化和独立性可以更容易地添加新的功能、修改现有功能或重构代码而无需对整个应用做大规模的更改。 1.2spa的访问过程 1访问index.html 2index.html通过main.js中的vue实例管理#app边界同时指定App.vue模板 3App.vue中包含了图片以及锚点而锚点与组件的对应关系存在router/index.js中所以就指向了一个组件 4最终App.vue中就显示了logo图片以及helloworld.vue的内容 1.3安装vue-cli(脚手架)
cmd窗口执行命令
npm install -g vue-cli
下载成功。 1.4下载我们的SPA项目
输入指令其中lya_spa是我们创建项目的名称 ----注意项目名不能用中文或大写字母 vue init webpack lya_spa 按照要求去回答相关问题如果与我选择的不一样后续可能会出现不必要的问题 这样spa项目就创建好了运行我们的项目 使用Hbuilderx导入我们插入下载的框架 更改端口号http://localhost:8888/
在config --index.js --module.exports --dev --port修改
访问我们初始的页面 导入SPA框架后我们来解释一下每个包的用处 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文件放在这个文件夹引用 三、 运行SPA项目
示例 按照创建路由的7个步骤来 1、引入路由js依赖main.js中已经完成 2、定义组件呈现形式是以.vue文件展示 template标签中定义组件内容 通过export default指定组件的名字 3、定义路由与组件之间的对应关系 router/index.js文件中进行定义 4、获取路由对象main.js中已经完成 5、挂载Vue实例main.js中已经完成 6、定义锚点App.vue 使用 router-view 7、触发事件App.vue 使用 router-link to 1.第一步SPA项目已经帮我们做了就直接进行下一步 2.创建定义内容。我们仿造SPA的项目进行定义在src下的components进行创建 2.1Home.vue
templatediv网站首页div idmaindiv idleft class/divdiv idrighth4姓名ctb 公司上海***有限公司/h4h4住址***********/h4/div/divdiv idfooter class ulh4本网页制作人为李永安 制作日期2023年9月21日20:51:56/h4/ul/div/div
/templatescriptexport default {name: Home,data () {return {msg: 网站首页}}}
/scriptstyle
/style 2.2About.vue
templatediv关于本网站/div
/templatescriptexport default {name: About,data () {return {msg: 关于本网站}}}
/scriptstyle
/style 3定义路由与配置路由路径
找到router下面的index.js进行添加路由与配置路由路径
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import Home from /components/Home
import About from /components/AboutVue.use(Router)export default new Router({routes: [{path: /,name: Home,component: Home},{path: /Home,name: Home,component: Home},{path: /About,name: About,component: About}]
})4定义触发路由的按钮
在App.vue中
templatediv idapp!-- img src./assets/logo.png --!-- 触发事件 --router-link to/Home首页/router-linkrouter-link to/About关于/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项目完成嵌套路由
相同的步骤
1.第一步SPA项目已经帮我们做了就直接进行下一步
2.创建定义内容。我们仿造SPA的项目进行定义在src下的components进行创建 2.1Home.vue
templatediv网站首页div idmaindiv idleft class/divdiv idrighth4姓名ctb 公司上海***有限公司/h4h4住址***********/h4/div/divdiv idfooter class ulh4本网页制作人为李永安 制作日期2023年9月21日20:51:56/h4/ul/div/div
/templatescriptexport default {name: Home,data () {return {msg: 网站首页}}}
/scriptstyle
/style 2.2About.vue
templatediv!-- 触发事件 --br /router-link to/AboutMe关于站长/router-linkrouter-link to/AboutWebsite关于本站/router-linkrouter-view/router-view/div
/templatescriptexport default {name: About,data() {return {msg: 关于本网站}}}
/scriptstyle
/style
2.3AboutWebsite.vue
templatediv网站历史/div
/templatescript
export default {name: AboutWebsite,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style 2.4AboutMe
templatediv这里是关于网站的发展/div
/templatescriptexport default {name: AboutMe,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 Home from /components/Home
import About from /components/About
import AboutMe from /components/AboutMe
import AboutWebsite from /components/AboutWebsiteVue.use(Router)export default new Router({routes: [{path: /,name: Home,component: Home}, {path: /Home,name: Home,component: Home}, {path: /About,name: About,component: About,children: [{path: /AboutMe,name: AboutMe,component: AboutMe}, {path: /AboutWebsite,name: AboutWebsite,component: AboutWebsite}]}]
}) 最后由于我们是嵌套路由的关系所以要将子路由挂到About.vue在About.vue router-view/router-view 效果
