spa----单页Web应用（single page application，SPA）
1.前提
nodeJS环境已经搭建完毕
node -v npm -v
2. 利用Vue-cli来构建spa项目
1.什么是Vue-cli
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：
vue init webpack xxx
注1：xxx 为自己创建项目的名称
注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境
2.安装vue-cli
npm install -g vue-cli # -g表示全局安装 npm install webpack -g
没有报错则表示安装成功
# cmd窗口执行,注意此处的V是大写的 vue -V
3. 使用脚手架vue-cli来构建项目
1.cmd窗口执行
vue init webpack xxx #此处的xxx指的是项目名
1.Project name：项目名，默认是输入时的那个名称spa 2.Project description：项目描述 3.Author：作者 4.Vue build：选择题 4.1 Runtime + Compiler: recommended for most users//运行加编译，官方推荐 4.2 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files //仅运行时 5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件 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安装依赖
显示如下内容表示创建成功
2.切换路径到这个spa项目
cd spa npm install # 安装项目所需要的npm模块 npm run dev # 运行项目
出现以下页面表示运行成功
4.项目结构说明
1.build 文件夹
这个文件夹主要是进行webpack的一些配置
1.webpack.base.conf.js
webpack基础配置,开发环境,生产环境都依赖
2.webpack.dev.conf.js
webpack开发环境配置
3.webpack.prod.conf.js
webpack生产环境配置
4. build.js
生产环境构建脚本
5.vue-loader.conf.js
此文件是处理.vue文件的配置文件
2.webpack.dev.conf.js
webpack开发环境配置
3.webpack.prod.conf.js
webpack生产环境配置
4. build.js
生产环境构建脚本
5.vue-loader.conf.js
此文件是处理.vue文件的配置文件
3.node_modules文件夹
存放npm install时根据package.json配置生成的npm安装包的文件夹
4.src文件夹
源码目录(开发中用得最多的文件夹)
1.assets
共用的样式、图片
2. components
业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
3.router
设置路由
4.App.vue
vue文件入口界面
5.main.js
对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
5.static文件夹
存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置, 对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用
6.package.json
这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包
5.什么是.vue文件
.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。 每个.vue文件包含三种类型的顶级语言块 ,
这三个部分分别代表了 html,js,css。
**注1：**不能直接把html代码包裹在中，而是必须在里面方置一个html标签来包裹所有的代码。
一般情况是使用
标签包含其它的代码(保证只有一个根元素)
<template> <div>...</div> </template>
**注2：**js代码写在
<script> export default { name: 'App' } </script>
**注3：**样式与以前的写法一样
6.使用路由
将前一部分内容重新写一遍
博客链接: https://blog.csdn.net/qq_50477101/article/details/131838689
效果
1.在components中添加Home.vue文件,编写内容
<template> <div>这是首页,展示网站的最新的内容</div> </template> <script> export default{ name: 'Home', data(){ return { } } } </script> <style> </style>
2.在components中添加About.vue文件,编写内容
<template> <div> 这是一个关于的页面 </div> </template> <script> export default{ name: 'About', data(){ return { } } } </script> <style> </style>
3.在router/index.js中写入以下内容
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' 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 } ] })
7.使用嵌套路由
效果
修改About.vue文件
<template> <div> <router-link to="/aboutMe">关于站长</router-link> <router-link to="/aboutWebsite">关于网站</router-link> <router-view></router-view> </div> </template> <script> export default{ name: 'About', data(){ return { } } } </script> <style> </style>
添加AboutMe.vue文件
<template> <div>关于本站创始人,xxxxxxxxx,xxxxx</div> </template> <script> export default { name: "AboutMe" } </script> <style scoped> </style>
添加AboutWebsite.vue文件
<template> <div>本站致力于xxx,目前发展了xxx,将要发展xxx</div> </template> <script> export default { name: "AboutWebsite" } </script> <style scoped> </style>
修改router/index.js文件
import Vue from 'vue' import Router from 'vue-router' 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 }, ] } ] })
