table of Contents
""" node ~~ python: node is written in c++ to run js code npm(cnpm) ~~ pip: npm is a terminal application store, you can change to domestic source cnpm vue ~~ django: vue is used to build vue front-end projects 1) Install node Download the installation package from the official website, fool-proof installation: https://nodejs.org/zh-cn/ 2) Change source to install cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) Install vue project scaffolding >: cnpm install -g @vue/cli Note: When 2 or 3 terminal installation fails, you can clear the npm cache and repeat the failed steps npm cache clean --force """
1) Enter the directory where the project is stored >: cd *** 2) Create project >: vue create project name 3) Project initialization
4. Choose to manually create the project
babel: Parse the syntax of es6 into es5 syntax (we mainly use es5)
TypeScript, if you use native JS to write, you can not choose
Progressive Web App Support website optimization measures to improve search, project optimization
Router routing, need to be installed
Vuex global singleton, used for parameter transfer between components, can be installed, stored value feature resets all data when the browser is refreshed, mainly used for parameter transfer of mobile terminal components
css pre-processors CSS pre-compilation, less and sass syntax projects need to be used, and the corresponding compiler needs to be installed
Linter/Formatter format the code and standardize the format of the code. Optional, but an error will be reported if the writing is not standardized.
Press the space to select, enter the next step
5. Enter after selection
6. Select Y for this step
7. The above options will only appear after you select the format management, and enter after you select
8.enter
9.enter
Note: If the requirements of each project are different, it is best not to choose Y. Once you choose Y, it will be troublesome to change later.
If we need to transfer the project to another configuration environment, we need to copy all the files under node_modules, or just copy the following three files. Be sure not to copy node_modules. There are tens of thousands of files in this folder. Copy And the upload speed will be particularly slow.
The above three folders must be present when rebuilding dependencies (node_modules).
cd to the folder corresponding to the project and execute cnmp install to load the dependencies. If you encounter an error, delete the code in the error part of the package file where the error is reported, so that the project can be loaded normally. We usually download it in GitHub If the project fails to run, it may also be a configuration file problem.
step:
If after migrating the project, the installation dependency error is reported as follows,
Find the corresponding route and modify it as follows
1. Open the vue project with pycharm
2. Add configuration npm startup
3. Configure npm to start
4. Install the plug-in needed to parse the .vue file, search for "vue", click install, and then click the restart software option
Click apply and then OK, the software will automatically restart and install the plug-in
├── v-proj | ├── node_modules//All dependencies of the current project, generally cannot be ported to other computer environments | ├── public | | ├── favicon.ico//label icon | | └── index.html//The only page of the current project | ├── src | | ├── assets//static resources img, css, js | | ├── components//small components | | ├── views//page components | | ├── App.vue//Root component | | ├── main.js//Global script file (entry of the project) | | ├── router | | | └── index.js//routing script file (configure the mapping relationship between routing url links and page components) | | └── store | | | └── index.js//Warehouse script file (vuex plug-in configuration file, data warehouse) | ├── README.md └ └── configuration files such as package.json
# 1) template: There is one and only one root tag, responsible for the html structure of the component
# 2) script: The component object must be exported export default {}
# 3) style: The style tag has a clear scoped attribute, which means that the style only works inside the component (the componentization of the style)
# 4) export default{component content} component content is the logical processing part of the component<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>The following two ways of writing are similar, but the second one is the one we used before. Previously, we defined that the sub-component and the root component are in the same file, which does not involve the import of files, but they are divided into files in the project, and need to import files
import Vue from'vue'
import App from'./App.vue'
import router from'./router'
import store from'./store'
//File import, import file name from'path', the file name is a proxy, which can be different from the real file name
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')import Vue from'vue'//load vue environment
import App from'./App.vue'//Load the root component
import router from'./router'//Load the routing environment
import store from'./store'//Load the data warehouse environment
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});Complete main.js
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Adapt to IE browser-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- Adapt to mobile terminal -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- Find the logo image (favicon.ico) under the root path -->
<title>v-proj</title>
</head>
<body>
<noscript>
Error reported when the browser does not support JS
</noscript>
<div id="app"></div><!-- The root component has its own template -->
</body>
</html>
<!-- There is only one page for the entire project -->The life cycle hook is a callback method for many time nodes from creation to destruction of a component. These methods are all members of the vue component instance. The function of the life cycle hook is to meet the needs to be completed at different time nodes.
Consider the following code:
beforeCreate() {
console.log('Home component is about to be created');
console.log(this.back_data);
},
created() {//Important method: complete the background data request in this hook
console.log('Home component was created successfully');
console.log(this.back_data);
},
beforeMount() {
console.log('Home component is ready to load')
},
mounted() {//A particularly time-consuming data request can be delayed until the component is initially loaded successfully, and then slowly request
//Pictures that are not easy to load can be placed here, and then continue to load after the text is loaded
console.log('Home component loading is complete')
},
destroyed() {//Here can do some prompt messages when the page is closed, such as asking the user to confirm whether to close the page, etc.
console.log('Home component destroyed successfully')
}We need to configure path, name and component (registered component)
import Vue from'vue'
import VueRouter from'vue-router'
import Home from'../views/Home.vue'
import Course from'../views/Course'
import CourseDetail from'../views/CourseDetail'
Vue.use(VueRouter);
const routes = [
{
path:'/',//This is equivalent to url, when the suffix of the path to be accessed is/, the home page is accessed
name:'home',//The name here is equivalent to the alias from the reverse analysis
component: Home
},
{
path:'/home',//When the suffix of the accessed path is/home, redirect to the corresponding page of/
redirect:'/',//route redirection
},
{
path:'/course',
name:'course',//Use of name: <router-link :to="{name:'course'}">course page</router-link>
component: Course
},
{
//The first routing parameter
//path:'/course/detail',
//The second type of routing parameter
path:'/course/:pk/detail',
//: pk has a famous group, so that pk can receive the corresponding value
name:'course-detail',
component: CourseDetail
}
];this.$router.push('/')//Control the route to jump to the path in brackets,
//If you are already on this path and jump to this path again, an error will be reported
this.$route.path//Get the current path (the suffix is not the full path)
$router.go(-1)
require('@/assets/img/001.jpg'),//Load static resources in the foreground logic using require, here you get the full path of the image, @ is src
redirect:'path',//route redirection
this.$router.go(2);//go is the history record forward and backward, positive means forward, negative means backward, and the number is the number of steps forward and backward<router-link to="/">Homepage</router-link> <!-- A tag after encapsulation --> <!-- Reverse analysis is used here, :to="the path to jump" -->
method one
<!--The first form of routing parameter/course/detail?pk=1-->
<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>
<!--Use the to attribute to bind to the sub-route, here use constants instead of variables -->
<router-link :to="{
name:'course-detail',
query: {pk: course.id}
}">{{ course.title }}
</router-link>Way two
<!--The second form of routing parameter/course/1/detail-->
<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>