响应式布局模板网站免费下载,wordpress导航 插件,商城网站离不开支付系统,石家庄电子商务网站建设目录
编辑 前言 一、vue-cli简介
1. 什么是vue-cli
2. vue-cli的重要性 3. vue-cli的应用场景
二、Vue-cli搭建SPA项目
1. 构建前提#xff08;node.js安装完成#xff09;
2. 安装vue-cli
3. 使用脚手架vue-cli(2.X版)来构建项目
4. 分析创建spa项目的八个问题
…
目录
编辑 前言 一、vue-cli简介
1. 什么是vue-cli
2. vue-cli的重要性 3. vue-cli的应用场景
二、Vue-cli搭建SPA项目
1. 构建前提node.js安装完成
2. 安装vue-cli
3. 使用脚手架vue-cli(2.X版)来构建项目
4. 分析创建spa项目的八个问题
5. 在开发工具中导入新建的SPA项目
6. 启动并访问项目
三、SPA项目实现路由跳转
1. 创建两个新组件
2. 建立路由的关系
3. 设置触发事件
页面演示效果
四、基于SPA项目完成嵌套路由
1. 创建两个新组件
2. 建立路由的关系
3. 设置触发事件
页面演示 前言 在上一期的博客中我给各位老铁带来了有关Vue之路由及node.js环境搭建上期的博客就是为本期博客做铺垫。今天我给老铁们带来有关Vue的vue-cli搭建SPA项目请老铁们自习阅读观看哦。 一、vue-cli简介
1. 什么是vue-cli Vue CLI 是一个基于 Vue.js 的脚手架工具用于快速搭建和开发 Vue.js 项目。脚手架是一组预设的开发环境和代码结构方便开发者快速开始新项目并提供了一系列的命令和配置选项来帮助开发者进行项目构建、开发和部署等工作。Vue CLI 提供了一种简单且标准化的方式来创建、管理和维护 Vue.js 项目使得开发者能够更专注于业务逻辑的实现而不用过多关心项目的设置和构建过程。 2. vue-cli的重要性 Vue CLI 的作用是为 Vue.js 项目提供脚手架工具以简化项目的搭建和开发过程。它的重要性体现在以下几个方面 快速搭建项目Vue CLI 提供了一套标准化的项目结构和配置选项使得开发者能够快速创建一个基于 Vue.js 的项目并自动集成了常用的构建工具、开发服务器等。 插件扩展能力Vue CLI 具有丰富的插件系统可以根据需求安装和配置各种插件如路由、状态管理、代码风格检查等。这些插件能够进一步增强项目的功能和开发体验。 集成开发服务器Vue CLI 可以快速启动一个开发服务器实时监听文件变化并自动刷新页面方便开发者进行实时预览和调试。 优化生产打包Vue CLI 提供了一系列的优化工具和配置选项可以帮助开发者对项目进行打包优化包括代码压缩、静态资源合并、懒加载等以提升项目的性能和加载速度。 3. vue-cli的应用场景 Vue-cli的应用场景 应用场景说明单页面应用SPA开发Vue CLI 提供了快速搭建单页面应用的能力可以轻松创建一个具有路由、状态管理和组件化架构的 SPA 项目。多页面应用MPA开发虽然 Vue 主要用于构建单页面应用但 Vue CLI 也能够支持多页面应用的开发。开发者可以通过配置多个入口文件来创建多个独立的页面。组件库开发Vue CLI 提供了一些命令和工具方便开发者创建和打包可复用的组件库。开发者可以使用 Vue CLI 创建一个组件库项目并通过配置进行构建和发布。原型开发Vue CLI 具备快速搭建原型的能力可以帮助开发者快速验证想法、设计界面并与后端进行数据交互。移动端开发Vue CLI 配合 Vue Native 或 Weex 等框架可以用于开发移动端的混合应用或原生应用。
二、Vue-cli搭建SPA项目
1. 构建前提node.js安装完成
在cmd终端窗口中输入node -v/npm -v指令分别查看node和npm的版本信息 只有在node.js安装成的情况下才能进行安装vue-cli。 2. 安装vue-cli 随便在那个cmd终端窗口输入一下命令执行没有先后顺序 npm install -g vue-cli npm install webpack -g 指令命令之后会在目录下生成一个文件。vue-cli文件 3. 使用脚手架vue-cli(2.X版)来构建项目
在终端命令窗口中输入 vue init webpack spa指令其中spa指的是项目名运行即可。 回答后续八个问题会自行创建项目 如下图就说明项目创建成功了 在指定的路径下我们可以找到我们创建好的SPA项目 4. 分析创建spa项目的八个问题 创建spa项目时的八个问采用“一问一答的模式” 1.Project name项目名默认是输入时的那个名称spa1直接回车 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 Yes, use Yarn No, I will handle that myself //选择题选第一项“Yes, use NPM”是否使用npm install安装依赖 5. 在开发工具中导入新建的SPA项目
在HBuilder X中右击左侧的项目栏选择导入选择从本地路径导入找到创建好的SPA项目 文件下的各文件用处 build构建SPA项目下的发布包用的。项目开发涉及不多 configindex.js:开发环境配置文件。 configprod.env.js:生产环境配置文件。 node_modulesSPA项目中所需到的所有js文件。后续有需要加的和maven类似一样添加 srcassets:放置项目静态资源。 srccomponents:放置.vue文件通常是通用组件 后续还需在src的文件下新创建一个view文件夹用于存储业务相关的组件。 srcrouter:存放定义路由与组件的对应关系的文件。 SPA项目的工作原理 6. 启动并访问项目
在指定目录下的cmd窗口中输入 cd 项目名的指令访问项目npm run dev指令启动项目然后就可以编写了 项目启动之后会给我们一个首页路径——http://localhost:8080在浏览器上访问该路径如下图所示 三、SPA项目实现路由跳转
1. 创建两个新组件
在components文件夹下创建两个.vue文件作为两个组件。
Home.vue
templatediv classHome这是网站首页宣传内容放在这样/div
/templatescript
export default {name: Home,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/styleAbout.vue
templatediv classAbout这是站长简介/div
/templatescript
export default {name: About,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style2. 建立路由的关系
在src文件下的router文件下的index.js文件中配置路由关系。
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
Vue.use(Router)export default new Router({routes: [//默认首页{path: /,name: Home,component: Home},{path: /,name: Home,component: Home},{path: /,name: About,component: About}]
})运行http://localhost:8080/效果 3. 设置触发事件
在App.vue中设置触发事件
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. 创建两个新组件
在components文件夹下创建两个.vue文件作为两个组件。
AboutMe
templatediv classAboutMe这是站长简介/div
/templatescript
export default {name: AboutMe,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/styleAboutWebsite
templatediv classAboutWebsite这是网站简介详情/div
/templatescript
export default {name: AboutWebsite,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style2. 建立路由的关系
在src文件下的router文件下的index.js文件中配置路由关系。
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/AboutWebsite
Vue.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}]}]
})3. 设置触发事件
在About.vue中设置触发事件
About.vue
templatediv classAboutrouter-link to/AboutMe关于站长/router-linkrouter-link to/AboutWebsite关于本站/router-link!-- 这是站长介绍网站的发展史 --router-view/router-view/div
/templatescript
export default {name: About,data () {return {msg: Welcome to Your Vue.js App}}
}
/scriptstyle
/style页面演示 本期博客项就到这了本期与老铁分享了vue-cli搭建PSA项目的步骤以及用SPA项目实现路由跳转及嵌套路由跳转。希望老铁三连加关注支持一波。
