mirror of
https://github.com/xxxsf/vue3-h5-template.git
synced 2025-04-05 20:35:49 +08:00
Feat doen
This commit is contained in:
shunfa.xu
parent
8dd524d82a
commit
d22b31bea0
42
README.md
42
README.md
@ -1,4 +1,6 @@
|
||||
# Vue2-SPA
|
||||
|
||||
> 可能是全网最干净的 `vue` 仓库
|
||||
> A Vue.js project with axios/vue-router/webpack
|
||||
|
||||
|
||||
@ -103,29 +105,25 @@ const app = new Vue({
|
||||
// 现在，应用已经启动了！
|
||||
```
|
||||
|
||||
### 生产环境要注意的地方：
|
||||
### 有关打包优化
|
||||
第三方库单独打包
|
||||
```
|
||||
npm i autodll-webpack-plugin -D
|
||||
```
|
||||
webpack 配置：
|
||||
```
|
||||
new AutoDllPlugin({
|
||||
inject: true, // will inject the DLL bundle to index.html
|
||||
debug: true,
|
||||
filename: '[name]_[hash].js',
|
||||
path: './dll',
|
||||
entry: {
|
||||
vendor: ['vue', 'vue-router'] // webpack 会去 `node_modules` 去找
|
||||
}
|
||||
})
|
||||
```
|
||||
每次打包，这个插件都会检查注册在 `entry` 中的第三方库。如果没有变化，插件就会使用缓存中的打包文件，减少了打包的时间，这时 Hash 也不会变化。
|
||||
|
||||
> 1、生产环境下若项目不是放在服务器的根目录下会访问不到静态资源，此时，你只需要修改下config文件夹内index.js的build中的assetsPublicPath即可
|
||||
|
||||
```
|
||||
before：
|
||||
assetsPublicPath: '/',
|
||||
```
|
||||
```
|
||||
after:
|
||||
assetsPublicPath: '/wx/otherPath/static',
|
||||
```
|
||||
|
||||
> 2、在写静态资源的时候最好使用相对路径，如：
|
||||
|
||||
```
|
||||
error:
|
||||
background: url(../assets/img/icon.png);
|
||||
```
|
||||
```
|
||||
right:
|
||||
background: url(./../assets/img/icon.png);
|
||||
```
|
||||
|
||||
|
||||
## Other SPA(其他单页)
|
||||
|
||||
@ -1,25 +1,55 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const AutoDllPlugin = require('autodll-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
bundle: path.resolve(__dirname, '../src/index.js')
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../dist'),
|
||||
filename: '[name].[hash].js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.resolve(__dirname, '../index.html')
|
||||
})
|
||||
]
|
||||
entry: {
|
||||
bundle: path.resolve(__dirname, '../src/index.js')
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../dist'),
|
||||
filename: '[name].[hash].js'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['*', '.js', '.json', '.vue'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'@': path.resolve(__dirname, '../src'),
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader']
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.resolve(__dirname, '../index.html')
|
||||
}),
|
||||
// Dll 优化，需要的时候可以打开
|
||||
// new AutoDllPlugin({
|
||||
// inject: true, // will inject the DLL bundle to index.html
|
||||
// debug: true,
|
||||
// filename: '[name]_[hash].js',
|
||||
// path: './dll',
|
||||
// entry: {
|
||||
// vendor: ['vue', 'vue-router']
|
||||
// }
|
||||
// }),
|
||||
new VueLoaderPlugin(),
|
||||
// new webpack.optimize.SplitChunksPlugin()
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
const merge = require('webpack-merge');
|
||||
const path = require('path');
|
||||
const baseConfig = require('./webpack.base.conf');
|
||||
const merge = require("webpack-merge");
|
||||
const path = require("path");
|
||||
const baseConfig = require("./webpack.base.conf");
|
||||
module.exports = merge(baseConfig, {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
mode: "development",
|
||||
devtool: "inline-source-map",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ["vue-style-loader", "css-loader", "postcss-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
devServer: {
|
||||
contentBase: path.resolve(__dirname, '../dist'),
|
||||
open: true
|
||||
}
|
||||
contentBase: path.resolve(__dirname, "../dist"),
|
||||
open: true,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,23 +1,30 @@
|
||||
const merge = require('webpack-merge');
|
||||
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
|
||||
const path = require('path');
|
||||
const baseConfig = require('./webpack.base.conf');
|
||||
const merge = require("webpack-merge");
|
||||
const path = require("path");
|
||||
const baseConfig = require("./webpack.base.conf");
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
mode: "production",
|
||||
devtool: "source-map",
|
||||
module: {
|
||||
rules: []
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// new CleanWebpackPlugin(['dist/'], {
|
||||
// root: path.resolve(__dirname, '../'),
|
||||
// verbose: true,
|
||||
// dry: false
|
||||
// }),
|
||||
new CleanWebpackPlugin({
|
||||
root: path.resolve(__dirname, '../'),
|
||||
root: path.resolve(__dirname, "../"),
|
||||
verbose: true,
|
||||
dry: false
|
||||
})
|
||||
]
|
||||
dry: false,
|
||||
}),
|
||||
// 抽取 CSS 到单文件
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "[name].css",
|
||||
chunkFilename: "[id].css"
|
||||
})
|
||||
],
|
||||
});
|
||||
|
||||
1242
package-lock.json
generated
1242
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -8,18 +8,28 @@
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.4.0",
|
||||
"autodll-webpack-plugin": "^0.4.2",
|
||||
"autoprefixer": "^6.7.7",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"css-loader": "^3.5.3",
|
||||
"file-loader": "^6.0.0",
|
||||
"html-webpack-plugin": "^4.0.0-beta.14",
|
||||
"webpack": "^4.16.3",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"webpack-merge": "^4.2.2"
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"vue-loader": "^15.9.2",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
25
src/App.vue
25
src/App.vue
@ -1,26 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!-- 可以删掉 顶部 -->
|
||||
<HeaderCompontent></HeaderCompontent>
|
||||
|
||||
<!-- 渲染出口 -->
|
||||
<router-view></router-view>
|
||||
|
||||
<!-- 可以删除 底部菜单 -->
|
||||
<FootComponent></FootComponent>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<!-- 可以删掉 顶部 -->
|
||||
<HeaderCompontent></HeaderCompontent>
|
||||
<!-- 渲染出口 -->
|
||||
<router-view></router-view>
|
||||
<!-- 可以删除 底部菜单 -->
|
||||
<FootComponent></FootComponent>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeaderCompontent from './components/header.vue'
|
||||
import FootComponent from './components/footer.vue'
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg:'Hello vue',
|
||||
}
|
||||
},
|
||||
components:{
|
||||
HeaderCompontent,
|
||||
FootComponent
|
||||
|
||||
@ -31,11 +31,9 @@
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.fixed-bottom div {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
display: grid;
|
||||
text-align: center;
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
}
|
||||
.fixed-bottom a {
|
||||
width: 100%;
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<img src="../assets/logo.png">
|
||||
<img src="https://png2.cleanpng.com/sh/9f5efd7936dbbc0513a929a7809ebd10/L0KzQYm3V8E5N5pnR91yc4Pzfri0lwVmNZt4RdxqdnH2c8PwkQQudJpnitN7eT3kfrj8jPFzcqQyitdqY4SwhsbsTfp0NWZnTNdrZUHmQIq4Wck0NmkATaI7OEK8QYa6Ucg5P2I4SqI8N0OxgLBu/kisspng-vue-js-javascript-library-angularjs-react-vue-js-5b4ebe1c091993.8950282915318871320373.png" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg: 'Hello vue'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
.header{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
20
src/index.js
20
src/index.js
@ -1,13 +1,9 @@
|
||||
// /* 项目启动 */
|
||||
// import Vue from 'vue'
|
||||
// import App from './App.vue'
|
||||
// import router from './router'
|
||||
// 项目启动
|
||||
import Vue from "vue";
|
||||
import App from "./App";
|
||||
import router from "./router";
|
||||
|
||||
// new Vue({
|
||||
// router: router,
|
||||
// render: h => h(App)
|
||||
// // components: { firstcomponent, secondcomponent }
|
||||
// }).$mount('#app')
|
||||
|
||||
const x = 'index.js';
|
||||
console.log(x);
|
||||
new Vue({
|
||||
router: router, // 注册路由
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app"); // 渲染挂载
|
||||
|
||||
@ -1,94 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<button v-on:click="loadMore">click me</button>
|
||||
<div>
|
||||
<button v-on:click="loadMore">click me</button>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="(item, index) in listArr">
|
||||
<a href="https://github.com/allan2coder/VUE2-SPA-Tutorial">{{index}} 《{{item.name}}》</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="loading" v-if="loading">
|
||||
Loading...
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(item, index) in listArr" :key="index">
|
||||
<a href="">{{ index }} 《{{ item.name }}》</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="loading" v-if="loading">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// ajax 使用官方推荐的 axios
|
||||
import axios from 'axios'
|
||||
|
||||
export default{
|
||||
data () {
|
||||
return{
|
||||
loading: false,
|
||||
listArr: [],
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadList();
|
||||
},
|
||||
methods: {
|
||||
loadList: function() {
|
||||
console.log("初始化加载数据开始...");
|
||||
var _this = this;
|
||||
_this.loading = true;
|
||||
axios.get('https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery', {
|
||||
params: {
|
||||
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
_this.loading = false;
|
||||
_this.listArr = response.data.items;
|
||||
console.log(_this.listArr,"加载完成");
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
loadMore: function(){
|
||||
console.log("load more")
|
||||
var _this = this;
|
||||
_this.loading = true;
|
||||
axios.get('https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery', {
|
||||
params: {
|
||||
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
_this.loading = false;
|
||||
_this.listArr = _this.listArr.concat(response.data.items);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data: () => ({
|
||||
loading: false,
|
||||
listArr: [],
|
||||
}),
|
||||
created() {
|
||||
this.loadList();
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
let url = "https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery";
|
||||
fetch(url, {
|
||||
method: "GET",
|
||||
}).then((res) => {
|
||||
const {data} = res;
|
||||
console.log(res);
|
||||
this.listArr = data.items;
|
||||
})
|
||||
.catch();
|
||||
},
|
||||
loadMore() {
|
||||
console.log("load more");
|
||||
this.loadList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 30px;
|
||||
border: 1px solid #ddd;
|
||||
color: #41b883;
|
||||
}
|
||||
a{
|
||||
color: #35495e;
|
||||
font-size: 16px;
|
||||
}
|
||||
ul{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
li{
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
}
|
||||
b{
|
||||
font-size: 12px;
|
||||
color: #35495e;
|
||||
}
|
||||
.loading{
|
||||
text-align: center;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 30px;
|
||||
border: 1px solid #ddd;
|
||||
color: #41b883;
|
||||
}
|
||||
a {
|
||||
color: #35495e;
|
||||
font-size: 16px;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
li {
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
}
|
||||
b {
|
||||
font-size: 12px;
|
||||
color: #35495e;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* 路由配置全写这里 */
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
@ -6,30 +5,30 @@ import VueRouter from 'vue-router'
|
||||
Vue.config.debug = true
|
||||
Vue.use(VueRouter);
|
||||
|
||||
import Index from '../pages/index.vue'
|
||||
import News from '../pages/news.vue'
|
||||
import secondcomponent from '../pages/otherPages.vue'
|
||||
import thirdcomponent from '../pages/otherPages2.vue'
|
||||
import Index from '../pages/index'
|
||||
import News from '../pages/news'
|
||||
import SecondComponent from '../pages/otherPages'
|
||||
import ThirdComponent from '../pages/otherPages2'
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'history',
|
||||
mode: 'hash', // 还有 history 等
|
||||
base: __dirname,
|
||||
routes: [
|
||||
{
|
||||
path: '/index',
|
||||
component: Index
|
||||
path: '/index',
|
||||
component: Index,
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
component: News
|
||||
path: '/news',
|
||||
component: News,
|
||||
},
|
||||
{
|
||||
path: '/second',
|
||||
component: secondcomponent
|
||||
path: '/second',
|
||||
component: SecondComponent,
|
||||
},
|
||||
{
|
||||
path: '/third',
|
||||
component: thirdcomponent
|
||||
path: '/third',
|
||||
component: ThirdComponent,
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user