Article directory
Talk about
Since I joined this company, I haven’t assigned any front-end work. In the previous company, I was able to write both front-end and back-end. Now I really can’t match the code of Vue. When I exchanged front-end knowledge with front-end friends a few days ago, I found that The front-end code in my mind seems to have been stolen, so I quickly find a project to practice. Although it is java now, I still want to do a full-stack in the future ( ▽ ) (hahaha, I am still trying not to spray), and I just need to understand the code and Notes on knowledge points, friends who want to learn, learn quickly! ! ! This project is quite similar to the company's.
1. Background
Simple background management, the type of project is not important, as long as you can be familiar with all the technical points in it.
In the company, there are generally more second openings. This system was built from scratch in order to learn more about it. Because I have a bit of Vue foundation, so some things may be simply skipped, and everyone who doesn't understand can start a discussion.
Two, build
Create a vue project
vue create vue-project
Because my version is low, the create command cannot be used:
Laughing, the version that hasn’t been used for a long time can’t keep up, so let’s update it by the way,
npm uninstall -g vue-cli
npm install -g @vue/cli
If you don't have this question, you can skip it directly. I created a vue project.
Introduction to Vue project structure
The various configuration files required by the package.json project are similar to the pom files in java.
The package-lock.json file is automatically generated when npm install is executed, and is used to record the specific source and version number of each dependent package actually installed in the current state and which dependencies this module depends on. You can simply understand it as a precise description of dependencies and devDependencies in package.json.
babel.config.js Babel is used as a translation tool to make our JavaScript code run normally in the old or environment that does not support new syntax and api. And this file is used for babel configuration. Usually, we will not be too detailed to convert the syntax involved in the target environment and configure them one by one, but use the @babel/preset-env package to perform "smart" pre-preset set up.
src The src directory contains our real "source code", and it is also the main battlefield of our development, that is, the pages, styles, and scripts involved in the project are all written here.
Files under src:
main.js : The default is the entry file of the entire project.
App.vue : It is the main component of the project and the entry file of the page.
assets : Static resource storage directory, which is different from the public directory in that this directory will be packaged and needs to be referenced using a relative path.
components : The component storage directory, where the public components of the project can be stored for use elsewhere.
public Any static resources placed in the public folder will be simply copied without going through webpack (the packaging tool that vue-cli depends on). You need to refer to them by absolute path.
Usually, we only need to pay attention to the public/index.html file, which will be injected with resource links such as processed JavaScript and CSS during the construction process. At the same time, it also provides a target for the Vue instance to mount.
As mentioned before, node_modules is the storage directory that the current project depends on.
Install the Element UI library
After the project is created, enter the file, install:
vue add element
import as needed, and it is also introduced on the official website of element:
npm install babel-plugin-component -D
this actually doesn’t matter, all imports are fine.
install axios
npm i axios -S
install querystring
npm i querystring -S
Install normalize.css
npm i normalize.css -S
Install echarts
npm i echarts -S
run
Try running it, npm run serve
there is nothing wrong with the old iron.
Remove useless components
helloword.vue delete
app.vue clears the demo data, leaving a shelf.
Basic css style import
base.css is a new file, I just write a few styles:
h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
/* 下划线 */
text-decoration: none;
}
img {
/* 垂直方向居中 */
vertical-align: middle;
}
body {
font-size: 14px;
font-family:'微软雅黑', 'Arial Narrow', Arial, sans-serif;
}
Introduce Alibaba vector icon library
to test icon usability
icon-icon_baitian-taiyang
restart the project
ok my sun came out, the problem is not big.
3. Page layout
configure routing
When I created the project, I didn't choose vue-router, so I added:
Install the latest vue-router: npm install vue-router -S
Note:
vue2 powered by vue-router3
vue3 powered by vue-router4
I installed the wrong version and reported an error at the beginning, so pay attention, and the uninstall command
Uninstall this incompatible routing version and reinstall the corresponding version:
npm uninstall vue-router
Install version 3:
npm install [email protected]
Create a new folder router
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index.vue'
import Login from '@/views/login/index.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:Layout
},{
path:'/login',
name:'login',
component:Login
}
]
const router = new VueRouter({
mode: 'history',
//base: process.env.BASE.URL,
routes
})
export default router
main.js is added to
configure the basic login page and layout page in the route:
Add the routing exit to App.vue, because the default is to enter the app.vue page. After adding router-view, it will jump to the configured routing /page
. Run down:
There may be errors in the name of the report.
This is because The new version has stricter monitoring of file names:
it can be added in package.json
"no-unused-vars": "off", // When there are defined but unused variables, turn off the error
"vue/multi-word-component-names": "off", //If the file name is not standardized, turn off the error
"vue/no-unused-components": "off" // Turn off error reporting when there are unused components defined
rerun
Notice:
When configuring routing, if the access belt
is searched from the root path, so the list cannot bring/product/list//
layout
layout in this format
npm install -D [email protected]
Pay attention to version issues when installing less
Create several new pages in the layout to be used as layout components
flex layout (elastic box)
Layout in the index of layout:
<template>
<div class="layout">
<div class="menu">
<Menu></Menu>
</div>
<div class="content">
<Content></Content>
</div>
</div>
</template>
<script>
import Menu from './menu/index.vue'
import Content from './content/index.vue'
export default {
components:{
Menu,
Content
}
}
</script>
<style lang="less" scoped>
.layout{
display: flex;
.menu {
width: 200px; //左边200px
background: gainsboro;
}
.content {
flex: 1;//占满剩余
background: rebeccapurple;
}
}
</style>
The effect presented:
fixed layout
<template>
<div class="layout">
<div class="menu">
<Menu></Menu>
</div>
<div class="content">
<Content></Content>
</div>
</div>
</template>
<script>
import Menu from './menu/index.vue'
import Content from './content/index.vue'
export default {
components:{
Menu,
Content
}
}
</script>
<style lang="less" scoped>
.layout{
// display: flex;
.menu {
width: 200px; //左边200px
background: gainsboro;
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
.content {
// flex: 1;//占满剩余
background: rebeccapurple;
}
}
</style>
Fixed Layout Configuration Routing
Go through it as a whole:
In this way, when accessing /the path, the secondary route in the content area only points to the home.vue page:
see the next article in the homepage column for the following content