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=>{})