2 == solve some grammatical errors vue2.0 console inside the package.
https://www.jianshu.com/p/5e0a1541418b
在build==>webpack.base.conf.j
下注释掉 ...(config.dev.useEslint ? [createLintingRule()] : []),
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: "vue-loader",
options: vueLoaderConfig
},
3 ==>
Solution vue use less error-less mounting Loader less
CNPM less the install less-dev-Loader --save
4.1
app.vue file is the root of all XXX.vue files
so webapp, the bottom is usually configured here
4 == "h5 New
<header> Title </ header>
<main> topic content </ main>
<footer> Fixed bottom content </ footer>
so the bottom is not normally used footer
5 ==> element is arranged at the bottom level
<div class = "myfooterbox">
<div> takeaway </ div>
<div> Search </ div>
<div> Orders </ div>
<div> I </ div >
</ div>
{.myfooterbox
width: 100%;
the display: Flex;
The justify-Content: Space-BETWEEN;
position: Fixed;
bottom: 0;
left: 0;
}
PS ==> If the width of the element is its width.
justify-content: space-between; may be of no effect.
6 == "click routing jumps
this $ router.push ({path:. " / Search "});
7 == "click to add elements of the current background color also using a certain class three head operation if it is true added
.on {
background: pink;
}
<div @click="handlersell" :class="{ on: '/' === $route.path }">外卖</div>
<div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜索</div>
8==》 路由跳转
<div @click="handlersell" :class="{ on: '/' === $route.path }">外卖</div>
<div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜所 </div>
methods: {
handlersell() {
this.$router.push({ path: "/" });
},
handlersearch() {
this.$router.push({ path: "/search" });
},
}
优化后 使用了replace
<div @click="handlergo('/')" :class="{ on: '/' === $route.path }">外卖</div>
<div @click="handlergo('/search')" :class="{ on: '/search' === $route.path }" >搜索</div>
handlergo(path) {
this.$router.replace(path);
}
11ok