Browse Source

init

master
燕鹏 4 years ago
commit
ed267f1355
  1. 17
      .eslintrc.js
  2. 5
      .postcssrc.js
  3. 83
      README.md
  4. 5
      babel.config.js
  5. 28
      package.json
  6. BIN
      src/assets/logo.png
  7. 57
      src/components/HelloWorld.vue
  8. 29
      src/index/App.vue
  9. 12
      src/index/main.js
  10. 21
      src/index/router.js
  11. 5
      src/index/views/About.vue
  12. 21
      src/index/views/Home.vue
  13. 12
      src/store.js
  14. 29
      src/subpage/App.vue
  15. 12
      src/subpage/main.js
  16. 21
      src/subpage/router.js
  17. 5
      src/subpage/views/About.vue
  18. 21
      src/subpage/views/Home.vue
  19. 16
      vue.config.js

17
.eslintrc.js

@ -0,0 +1,17 @@
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}

5
.postcssrc.js

@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {}
}
}

83
README.md

@ -0,0 +1,83 @@
# 基于 vue-cli 3.0.0 构建的多页面基础项目模板
前言
---
> 该项目跑了下 `vue-cli 3.0.0` 多页面项目创建的流程,就当个以后多页项目的雏形了,新版的 `vue-cli` 已经默认可以支持多页面构建了(不需要之前版本的那种修改 `webpcak` 配置文件了),可以共用放在 `src` 目录下的 `store.js` 里面的数据
效果 GIF 图
---
> ![效果.gif](https://upload-images.jianshu.io/upload_images/9064013-9b433b4901fbc83e.gif?imageMogr2/auto-orient/strip)
参考资料
---
- [vue-cli 整体官方文档](https://cli.vuejs.org/guide/)
- [vue-cli 3.0.0 安装](https://cli.vuejs.org/guide/creating-a-project.html#installation)
- [vue-cli 多页面的配置方法](https://cli.vuejs.org/config/#pages)
注意:这里的 `vue.config.js` 配置文件是需要自行创建的,与 `package.json` 一样存在于项目根目录
- [vue.config.js 配置文件官方介绍](https://cli.vuejs.org/config/#vue-config-js)
运行方法(nodejs 版本建议 8.10.0 以上)
---
- 装包
```shell
# 先得全局安装 vue-cli 3.0.0 已安装的请忽略此步骤
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 本项目安装依赖
yarn
# OR
npm install
```
- 运行
```
# 开发
npm run serve
# 生产
npm run build
```
主要修改的地方
---
- 将之前默认的路径改为以 `@` 为地址的索引
> ![image.png](https://upload-images.jianshu.io/upload_images/9064013-f68f00de655ae06f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> ![image.png](https://upload-images.jianshu.io/upload_images/9064013-d91ea67d028df791.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 新建 `index``subpage` 文件夹,内部的文件结构与之前 `SPA` 基本一致,只是将 `store.js` 文件单独提了重来以便数据公用
- 重点就是新建的 `vue.config.js` 配置文件里面的内容,源码和注释如下所示
```javascript
// vue.config.js
module.exports = {
pages: {
index: {
// 页面的入口文件
entry: 'src/index/main.js',
// 页面的模板文件
template: 'public/index.html',
// build 生成的文件名称 例: dist/index.html
filename: 'index.html'
},
// template 默认会去找 public/subpage.html 页面,如果找不到会使用 public/index.html 文件
// 输出文件会默认的推断为 subpage.html
subpage: 'src/subpage/main.js'
}
}
```

5
babel.config.js

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

28
package.json

@ -0,0 +1,28 @@
{
"name": "multipage",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
"@vue/cli-plugin-eslint": "^3.0.0-beta.15",
"@vue/cli-service": "^3.0.0-beta.15",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

BIN
src/assets/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

57
src/components/HelloWorld.vue

@ -0,0 +1,57 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

29
src/index/App.vue

@ -0,0 +1,29 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

12
src/index/main.js

@ -0,0 +1,12 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

21
src/index/router.js

@ -0,0 +1,21 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})

5
src/index/views/About.vue

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

21
src/index/views/Home.vue

@ -0,0 +1,21 @@
<template>
<div class="home">
<img src="@/assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
mounted() {
console.log(`这个是默认页面的主页:${this.$store.state.myname}`)
}
}
</script>

12
src/store.js

@ -0,0 +1,12 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
myname: 'sunxiaochuan'
},
mutations: {},
actions: {}
})

29
src/subpage/App.vue

@ -0,0 +1,29 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

12
src/subpage/main.js

@ -0,0 +1,12 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

21
src/subpage/router.js

@ -0,0 +1,21 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})

5
src/subpage/views/About.vue

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

21
src/subpage/views/Home.vue

@ -0,0 +1,21 @@
<template>
<div class="home">
<img src="@/assets/logo.png">
<HelloWorld msg="多页面测试页"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
mounted() {
console.log(`这个是多页面测试页的主页:${this.$store.state.myname}`)
}
}
</script>

16
vue.config.js

@ -0,0 +1,16 @@
// vue.config.js
module.exports = {
pages: {
index: {
// 页面的入口文件
entry: 'src/index/main.js',
// 页面的模板文件
template: 'public/index.html',
// build 生成的文件名称 例: dist/index.html
filename: 'index.html'
},
// template 默认会去找 public/subpage.html 页面,如果找不到会使用 public/index.html 文件
// 输出文件会默认的推断为 subpage.html
subpage: 'src/subpage/main.js'
}
}
Loading…
Cancel
Save