建立vue專案步驟、專案目錄介紹、es6語法之匯入匯出、定義並使用元件、整合bootstrap，jQuery，elementui、與後端互動

阿新 • • 發佈：2022-04-15

今日內容概要

vue-cli建立專案
vue專案目錄介紹執行專案
es6語法之匯入匯出
定義並使用元件
整合bootstrap，jQuery，elementui
與後端互動

內容詳細

1、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 ui 建立專案（就是在圖形化介面中建立專案）
步驟 參考命令列方式即可

GUI ：圖形化介面，  GUI程式設計---》圖形化介面程式設計

C#做win平臺的圖形化介面
python寫圖形化介面：Tkinter
pyqt: qt是個平臺，可以使用c語言，使用python在平臺寫程式碼---》做圖形化介面
"""

2、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  # 元件，頁面元件
				----AboutView.vue  # 預設提供了示例元件
				----HomeView.vue  # 預設提供了示例元件
			---App.vue  # 根元件
			---main.js  # 專案的入口
		--.gitignore  # git的忽略檔案
		--babel.config.js  # babel配置
		--jsconfig.json  # 忽略
		--package.json  # 專案的所有依賴，類似於  requirements.txt,不要刪，npm install根據這個檔案下載第三方模組
		--package-lock.json # 忽略
		--README.md
		--vue.config.js  # vue的配置

3、es6語法之匯入匯出

# js 模組化開發--》引出 模組，包的概念
# 寫了一個包，在其他js中匯入使用


### 匯入
	import 起個名字 from '路徑'
    
	import Vue from 'vue'  # 起了個名字叫 Vue，vue在node_modules中了，直接寫名字即可
    
// 演示程式碼--》匯入使用--》拿到的就是匯出的物件
// 新建目錄下檔案：assets/js/ settings.js 檔案
import settings from '../assets/js/settings'
console.log(settings.name)
console.log(settings.printName())
"""
### settings.js 檔案內容：

// es6的 let：變數   和   const：常量
// 原來定義變數 var 變數 = 值  --->很多坑，會有變數提升，變數作用也後坑
// 現在建議使用 let const 定義

let name = 'lqz'

function printName() {
    console.log(name)
}
// 把物件匯出
export default {name,printName: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)

4、定義並使用元件

# 新建一個 xx.vue,內部包含三塊
<template>  # 寫原來模板字串``   html內容
</template>

<script>
    export default {
        data(){retrun {
        name:'lqz'
    }},
    methods:{},
    }
</script>
    
<style scoped>  # scoped 樣式只在當前元件中生效
</style>


# 自定義元件
# 在components目錄下新建 xx.vue檔案：
<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click="handleC">點我看美女</button>
  </div>
</template>

<script>
export default {
  name: "jgx",
  data() {
    return {
      name: "jgx is nb"
    }
  },
  methods: {
    handleC() {
      alert('美女')
    }
  }
}

<style scoped>
  h1 {
  background: pink;
  font-size: 60px;
  text-align: center;
}
</style>

5、整合bootstrap，jQuery，elementui

# bootstrap---》ui---》後期一般不用bootstap
	第一步：下載
		npm install bootstrap@3 -S  # -S表示把當前模組加入到package.json檔案中
		npm 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);

6、與後端互動

第一步：安裝
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=>{})