SQL筆記——開端
阿新 • • 發佈:2022-04-14
vue-cli建立專案
# 單檔案元件-->一個檔案,以 xx.vue 命名,就是一個元件 # vue-cli建立專案,webpack構建---》nodejs環境 -nodejs是一門後端語言--》javascript解釋型語言,只能執行在直譯器中---》瀏覽器中集成了js的直譯器---》javascript只能執行在瀏覽器中---》谷歌瀏覽器的v8引擎---》執行在作業系統之上---》os,網路通訊的模組,檔案處理---》nodejs的直譯器 -http://nodejs.cn/---》一路下一步---》cmd命令視窗下---》node命令(python),npm命令(pip)-以往版本:https://nodejs.org/zh-cn/download/releases/ # 在nodejs的環境上裝vue-cli:vue腳手架 -npm install -g cnpm --registry=https://registry.npm.taobao.org -以後使用cnpm替換掉npm即可:下載速度快 -cnpm install -g @vue/cli # 速度慢,淘寶寫了工具 cnpm,完全替換npm的功能,使用cnpm回去淘寶映象站下載,速度快 # 建立專案---》git上拉取 -方式一:命令列方式 -vue create myfirstvue-方式二:圖形化介面 -vue ui # 會啟動一個服務,用瀏覽器訪問建立vue專案
vue專案目錄介紹
# 執行專案方式一 在專案路徑下:npm run serve # 使用pycharm執行 -點選綠色箭頭執行 # 目錄介紹 -myfirstvue # 專案名字 -node_modules # 放著當前專案所有的依賴,可以刪除,刪除專案執行不了了,npm install 把該專案的依賴再裝上,把專案發給別人,提交到git上,資料夾要刪掉 -public # 資料夾-favicon.icon # 小圖示 -index.html # 單頁面開發,整個專案就這一個頁面,以後不要動 -src # 以後咱們都是在這裡面寫東西 -assets # 放靜態資源,圖片,js,css -components # 元件,xx.vue元件,小元件,給頁面元件用 -HelloWorld # 提供的預設元件,示例 -router # vue-router就會有這個資料夾 -index.js # vue-router的js程式碼 -store # vuex 就會有這個資料夾 -index.js # vuex 的js程式碼 -views # 元件,頁面元件 -About -Home # 預設提供了示例元件 -App.vue # 根元件 -main.js # 專案的入口於 -.gitignore # git的忽略檔案 -babel.config.js # babel配置 -package.json # 專案的所有依賴,類似於 requirements.txt,不要刪,npm install根據這個檔案下載第三方模組 -vue.config.js # vue的配置
es6語法的匯入匯出
# js 模組化開發--》模組,包的概念 # 寫了一個包,在其他js中匯入使用 # 匯入 # import 起個名字 from '路徑' # import Vue from 'vue' # 起了個名字叫Vue,vue在node_modules中了,直接寫名字即可 // 演示程式碼--》匯入使用--》拿到的就是匯出的物件 import settings from '../assets/js/settings' console.log(settings.name) console.log(settings.printName()) # 匯出 # export default 物件 let name = 'lqz' function printName() { console.log(name) } // 把物件匯出 export default {name:name,printName:printName} # 包的匯出---》資料夾下新建index.js # 包匯入的時候,導到資料夾這一層即可 import lqz from '../lqz' console.log(lqz.name)
定義並使用元件
# 新建一個 xx.vue,內部包含三塊 -<template></template> # 寫原來模板字串`` html內容 -<script> export default { data(){retrun { name:'lqz' }}, methods:{}, } </script> -<style scoped> # scoped 樣式只在當前元件中生效 </style> # 自定義元件 <template> <div> <h1>{{name}}</h1> <button @click="handleC">點我看美女</button> </div> </template> <script> export default { name: "Lqz", data(){ return { name:"lqz is nb" } }, methods:{ handleC(){ alert('美女') } } } </script> <style scoped> h1 { background: pink; font-size: 60px; text-align: center; } </style>
整合bootstrap,jQuery,elementui
# bootstrap---》ui---》後期一般不用bootstap -第一步:下載 -cnpm install bootstrap@3 -S # -S表示把當前模組加入到package.json檔案中 -cnpm install jquery -第二步在main.js中配置 // bootstrap的配置 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' -第三步:vue.config.js中 const {defineConfig} = require('@vue/cli-service') const webpack = require("webpack"); module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", "window.$": "jquery", Popper: ["popper.js", "default"] }) ] }, })
# 專門給vue的ui庫--》寫ui儘量用它 第一步:下載 cnpm install element-ui -S 第二步:main.js 配置 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
與後端互動
第一步:安裝 cnpm install axios -S 第二步:main.js 配置 import axios from 'axios' Vue.prototype.$axios = axios; 第三步:使用 # 在任意元件中 # this.$axios 就是axios物件 this.$axios.get().then(res=>{}) 第三步:如果沒有第二步的配置 # 在任意元件中 import axios from 'axios' axios.get('').then(res=>{})