commit ed267f1355ebd8a095b50aa79efb73433fd826ab Author: 燕鹏 Date: Wed Dec 2 19:38:55 2020 +0800 init diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..20034fd --- /dev/null +++ b/.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' + } +} \ No newline at end of file diff --git a/.postcssrc.js b/.postcssrc.js new file mode 100644 index 0000000..100cc01 --- /dev/null +++ b/.postcssrc.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + autoprefixer: {} + } +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..41cf8c9 --- /dev/null +++ b/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' + } + } + ``` diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..b89d655 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/app' + ] +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..583fae2 --- /dev/null +++ b/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" + ] +} \ No newline at end of file diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..d86cacb --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,57 @@ + + + + + + diff --git a/src/index/App.vue b/src/index/App.vue new file mode 100644 index 0000000..97c3ca7 --- /dev/null +++ b/src/index/App.vue @@ -0,0 +1,29 @@ + + + diff --git a/src/index/main.js b/src/index/main.js new file mode 100644 index 0000000..e1d39a0 --- /dev/null +++ b/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') diff --git a/src/index/router.js b/src/index/router.js new file mode 100644 index 0000000..9e03a62 --- /dev/null +++ b/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 + } + ] +}) diff --git a/src/index/views/About.vue b/src/index/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/src/index/views/About.vue @@ -0,0 +1,5 @@ + diff --git a/src/index/views/Home.vue b/src/index/views/Home.vue new file mode 100644 index 0000000..2ed354f --- /dev/null +++ b/src/index/views/Home.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..15743fb --- /dev/null +++ b/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: {} +}) diff --git a/src/subpage/App.vue b/src/subpage/App.vue new file mode 100644 index 0000000..97c3ca7 --- /dev/null +++ b/src/subpage/App.vue @@ -0,0 +1,29 @@ + + + diff --git a/src/subpage/main.js b/src/subpage/main.js new file mode 100644 index 0000000..e1d39a0 --- /dev/null +++ b/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') diff --git a/src/subpage/router.js b/src/subpage/router.js new file mode 100644 index 0000000..9e03a62 --- /dev/null +++ b/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 + } + ] +}) diff --git a/src/subpage/views/About.vue b/src/subpage/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/src/subpage/views/About.vue @@ -0,0 +1,5 @@ + diff --git a/src/subpage/views/Home.vue b/src/subpage/views/Home.vue new file mode 100644 index 0000000..4c43a45 --- /dev/null +++ b/src/subpage/views/Home.vue @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..5b61afd --- /dev/null +++ b/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' + } +}