Vue project environment setup
Vue-cli3.0 scaffolding construction project
1. Installation node. Js
Liverpoolfc.tv: nodejs.org/en/
2. Install VUE-CLI 3.0
npm install -g @vue/cli
Copy the code
Check the version after the installation: vue -v (uppercase V)
3. Create projects
Go to the directory where you want to create the project (WeChat: Project name)
vue create project-name
Copy the code
Default: Use the default configuration
Manually select features is a user-defined configuration
4. Select Custom configuration
Space bar Toggles the selected state
TypeScript: A superset of JS provided by Microsoft
Progressive Web App (PWA) Support: Progressive Web applications.
The Router: routing
Vuex:Vuex is a state management mode + library for vue.js applications
CSS pre-processors :Sass/Less preprocessors
Linter/Formatter: Code style check
Unit Testing: Support for Unit Testing
E2E Testing: Supports E2E Testing
5. Select CSS precompilation, which I chose less
6. Syntax checking tool, here I choose ESLint + Standard Config
7. Select syntax check mode, here I’m going to select Lint on Save.
8. I choose to save the configuration file in an independent folder
9. Record the configuration: If you type N, do not record the configuration. If you type Y, you need to enter the name to save the configuration
10. After confirming, wait for the dependency module to be downloaded
11. Start the project
cdProject-name // Go to the root directory NPM run serve // Run the projectCopy the code
Delete unneeded structures:
1. Delete the files of the SRC /cpomponents project
2. Delete the pictures under Assets
3. Delete the favicon.icon under Pubilc
Temporary page modifications:
src/App.vue:
<template>
<div id="app">
<home></home>
</div>
</template>
<script>
import home from "./views/Home";
export default {
components: {
home
}
};
</script>
<style lang="less">
</style>
Copy the code
src/views/Home.vue:
<template>
<div class="home">home</div>
</template>
<script>
export default {
name: "home",
};
</script>
Copy the code
12. Asynchronous request library axios.js
1. Installation:
Install Axios in the wechat project
npm install --save axios
Copy the code
2. Introduction:
1. Modify the SRC/main. Js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1. Introduce axios
import axios from 'axios'
Vue.config.productionTip = false
// 2. Bind axios to the vue instance property $axios
Vue.prototype.$axios = axios
new Vue({
router,
store,
render: h= > h(App)
}).$mount('#app')
Copy the code
3. Test introduction
Modify thesrc/App.vue
<template>
<div id="app">
<home></home>
</div>
</template>
<script>
import home from "./views/Home";
export default {
components: {
home
}
};
</script>
<style lang="less">
</style>
Copy the code
Modify the SRC/views/Home. Vue
<template> <div class="home">home</div> </template> <script> export default { name: "home", mounted() { this.$axios .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update") .then(res => { console.log(res); }); }}; </script>Copy the code
13. Introduce iconfont
Website: www.iconfont.cn/
1. Download the font icon you added
2. Place the downloaded font icon in the iconFont folder under SRC/Assets (create it yourself)
3. Test the modification
Introduced in the SRC/main. Js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Introduce the iconfont style
import './assets/iconfont/iconfont.css'
// 1. Introduce axios
import axios from 'axios'
Vue.config.productionTip = false
// 2. Bind axios to the vue instance property $axios
Vue.prototype.$axios = axios
new Vue({
router,
store,
render: h= > h(App)
}).$mount('#app')
Copy the code
In the SRC/views/Home. Vue modification
<template> <div class="home">home <div class="iconfont icon-iconfonthome0"></div> </div> </template> <script> export default { name: "home", mounted() { this.$axios .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update") .then(res => { console.log(res); }); }}; </script>Copy the code
Effect of 4.
14. Introducing Vant (UI Framework)
1. Install the vant
npm i vant -S
Copy the code
2. Import components
Installing a plug-in
npm i babel-plugin-import -D
Copy the code
In the Babel. Config. Js configuration
module.exports = {
presets: [
'@vue/app'].plugins: [['import', {
libraryName: 'vant'.libraryDirectory: 'es'.style: true
}, 'vant']]}Copy the code
In the SRC/main. Js configuration
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Introduce the iconfont style
import './assets/iconfont/iconfont.css'
// Introduce styles for Vant UI components
import 'vant/lib/index.css'
// 1. Introduce axios
import axios from 'axios'
Vue.config.productionTip = false
// 2. Bind axios to the vue instance property $axios
Vue.prototype.$axios = axios
new Vue({
router,
store,
render: h= > h(App)
}).$mount('#app')
Copy the code
3. Test the effect
src/views/Home.vue
<template>
<div class="home">
home
<div class="iconfont icon-iconfonthome0"></div>
<van-button type="primary">The main button</van-button>
</div>
</template>
<script>
import Vue from "vue";
import { Button } from "vant";
Vue.use(Button);
export default {
name: "home",
mounted() {
this.$axios
.get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
.then(res= > {
console.log(res); }); }};</script>
<style lang="less" scoped>
</style>
Copy the code
15. Rem adaptation
Styles in Vant are used by defaultpx
As a unit, if requiredrem
Unit: You are advised to use the following tools:
1. Postcss – PxtoREM is a PostCSS plugin that converts units to REM
npm install postcss-pxtorem --save-dev
Copy the code
2. Lib-flexible Set rem reference value
npm i lib-flexible --save
Copy the code
Configure it in postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android > = 4.0'.'iOS >= 7']},'postcss-pxtorem': {
rootValue: 37.5.propList: [The '*']}}}Copy the code
Import the downloaded flexible into main.js
/ / into the lib - flexible
import 'lib-flexible/flexible'
Copy the code