物联网网站的建设和维护,公司建设网站的优缺点,wordpress 付费主题 高级功能编辑器,怎么通过做网站赚钱一、SPA项目的构建 1、前期准备 我们的前期的准备是搭建好Node.js,测试#xff1a; node -v
npm -v2、利用Vue-cli来构建spa项目 2.1、什么是Vue-cli Vue CLI 是一个基于 Vue.js 的官方脚手架工具#xff0c;用于自动生成vue.jswebpack的项目模板#xff0c;它可以帮助开发者…
一、SPA项目的构建 1、前期准备 我们的前期的准备是搭建好Node.js,测试 node -v
npm -v2、利用Vue-cli来构建spa项目 2.1、什么是Vue-cli Vue CLI 是一个基于 Vue.js 的官方脚手架工具用于自动生成vue.jswebpack的项目模板它可以帮助开发者快速搭建 Vue.js 项目的基础结构并提供了一系列的开发工具和配置选项。Vue CLI 提供了命令行界面和图形化界面两种方式开发者可以根据自己的喜好选择使用。使用 Vue CLI可以轻松进行项目初始化、管理依赖、开发调试、构建打包等常用开发任务简化了 Vue.js 应用的开发流程提高了开发效率。 创建命令如下 vue init webpack xxx xxx 为自己创建项目的名称必须先安装vue,vue-cliwebpacknode等一些必要的环境 2.2、安装vue-cli Win R CMD 进入命令窗口输入npm install -g vue-cli命令 输入npm install webpack -g 安装成功后会出现如下文件 vuevue.cmd vue-initvue-init.cmdvue-listvue-list.cmd 安装完成之后打开命令窗口并输入 vue -V注意这里是大写的“V”如果出现相应的版本号则说明安装成功。 2.3、使用脚手架vue-cli构建项目 创建项目骨架 找到一个放这个骨架的路径进入目录CMD进入命令窗口 vue init webpack xxx xxx为你的项目名项目名不能用中文或大写字母然后终端会出现“一问一答”模式 cmd命令行窗口显示中文乱码是cmd命令行窗口字符编码不匹配导致 修改cmd窗口字符编码为UTF-8命令行中执行chcp 65001 切换回中文chcp 936 这两条命令只在当前窗口生效重启后恢复之前的编码。 “一问一答”模式 Project name项目名默认是输入时的那个名称spa1直接回车 Project description项目描述直接回车 Author作者随便填或直接回车 Vue build选择题一般选第一个 运行加编译官方推荐就选它了 仅运行时已经有推荐了就选择第一个了 Install vue-router是否需要vue-router Y选择使用这样生成好的项目就会有相关的路由配置文件 Use ESLint to lint your code是否用ESLint来限制你的代码错误和风格。 如果你是新手一般填N但实际项目中一般都会使用这样多人开发也能达到一致的语法 Set up unit tests是否安装单元测试N Setup e2e tests with Nightwatch?是否安装e2e测试N Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) 第一项“Yes, use NPM”是否使用npm install安装依赖 全部选择好回车就进行了生成项目出现如下内容表示项目创建完成我们进行等待就行 运行完上面的命令后我们需要将当前路径改变到SPA这个文件夹内 cd gq_spa:改变路径到gq_spa文件夹下 npm install:安装所有项目需要的npm模块 启动并访问项目 输入npm run dev 等待启动 复制上面的地址http://localhost:8080/进入浏览器访问 最后利用我们的编程软件进行添加 2.4、vue项目结构说明
build文件夹这个文件夹主要是进行webpack的一些配置 webpack.base.conf.jswebpack基础配置,开发环境,生产环境都依赖webpack.dev.conf.jswebpack开发环境配置webpack.prod.conf.jswebpack生产环境配置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.vuevue文件入口界面 main.js对应App.vue创建vue实例也是入口文件对应webpack.base.config.js里的入口配置 static文件夹存放的文件不会经过webpack处理可以直接引用例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader也可以直接将swf文件放在这个文件夹引用 package.json这个文件有两部分是有用的scripts 里面设置命令以及在dependencies和devDependencies中分别对应全局下载和局部下载的依赖包 3、什么是Vue文件 vue 文件是一个自定义的文件类型用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 template, script 和 style。这三个部分分别代表了 html,js,css。 二、SPA项目使用路由 我们以前的步骤 确保引入Vue.vue-router的js依赖首先需要定义组件就是展示不同的页面效果需要将不同的组件放入一个容器中路由集合将路由集合组装成路由器将路由挂载到Vue实例中定义锚点跳转 现在的步骤 1、依赖 确定我们的挂在依赖在我们的main.js里面路由也已经挂载了不用管了 2、定义组件 在components文件夹里面新建你需要的vue文件 3、定义容器 vue文件里面的template里面有且只能有一个根节点 script
/scripttemplatediv classindex这是网站的首页部分/div
/templatestyle scoped/stylescript
/scripttemplatediv classhome这是网站的介绍/div
/templatestyle scoped/style4、组装成路由器 script
export default {name: Index,data() {return {msg: 欢迎来到网站的首页}}
}
/scripttemplatediv classindex这是网站的首页部分/div
/templatestyle scoped/stylescript
export default {name: home,data() {return {msg: 欢迎来到网站的介绍部分}}
}
/scripttemplatediv classhome这是网站的介绍/div
/templatestyle scoped/style5、定义路由关系 在router文件夹里面的index.js文件里面定义路由关系 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import Index from /components/Index
import Home from /components/HomeVue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld}, {path: /Home,name: Home,component: Home}, {path: /Index,name: Index,component: Index}]
})定义自己的写的一个关系 6、定义锚点 在App.vue里面定义锚点 templatediv idappimg src./assets/logo.pngbrrouter-link to/Index首页/router-linkrouter-link to/Home介绍/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;
}
/style7、测试 三、SPA项目使用嵌套路由
1、最终展示效果 2、步骤
2.1、定义锚点 选择你需要定义的页面定义锚点 2.2、组装、定义容器 错不多的步骤定义好容器组装需要的内容 2.3、定义关系 添加自己写的关系 我们不能直接在后面添加需要用children数组来添加到指定的页面不然展示不了我们需要的效果 2.4、测试 最后就展示我们的一个效果了 分享就到这里感谢大家翻阅。
欢迎大家在评论区里讨论
