Vue-cli

vue-cli創建項目

1.下載node解釋器
    在node官網中下載node解釋器，安裝時一直下一步就行
2.驗證
    node下載完是自動添加環境變量的，可以在cmd中輸入node來驗證
3.安裝vue-cli
    npm install -g @vue/cli  # 使用原生的npm速度慢，可以使用cnpm來替換
    # cnpm淘寶出的工具，下載的時候，去淘寶鏡像下載，速度快
    npm install -g cnpm --registry=https://registry.npm.taobao.org  # 替換npm,后面的是指定淘寶鏡像
    cnpm install -g @vue/cli  # 使用cnpm后安裝速度就很快了
4.使用vue-cli創建項目
    # 為了之后查找方便可以先找個目錄，然后在該目錄下創建項目
    vue create vue項目名
    之后的可以按下圖操作
    # vue ui 使用圖形化界面

vue項目介紹

vue項目的運行

pycharm運行項目的兩種方式
    1.在命令行中執行
        npm run serve
    2.使用pycharm的綠色箭頭執行
        在pycharm的運行按鈕邊上的執行項目中添加npm項目，Scripts選項填寫serve，然后Apply Ok 即可

vue項目目錄

myfirstvue  # 項目名
    node_modules  # 存有非常多的第三方模塊，以后把項目復制給別人時，這個文件夾刪掉，但是項目的運行需要它，如果沒有只需要執行 cnpm install ，就會根據package.json的依賴包安裝好依賴
    public  # 文件夾
        favicon.ico  # 網站圖標
        index.html  # spa單頁面應用，以后整個vue項目都是用這一個html，但我們不用動
    src  # 文件夾，以后我們操作這里的
        assets  # 靜態資源，以后我們前端常用的圖片、js、css等都放在這里
        	logo.png  # 圖片
        components  # 以后這里放組件
        	HelloWorld.vue  # 提供的展示組件
        router  # 安裝了Router就有的，下面會有個index.js
        	index.js
        store  # 安裝了Vuex就會有的,下面會有個index.js
        	index.js
        views  # 頁面組件
            AboutView.vue
            HomeView.vue
        App.vue  # 根組件，new Vue實例管理了div，原來寫在div中的東西現在都寫在App.vue中
        main.js  # 項目的啟動入口
    .gitignore  # git的忽略文件
    babel.config.js  # bable配置文件，不用管
    jsconfig.json  # 配置文件，不用動
    package.json  # 安裝了第三方模塊它會自動增加，不用管
    package-lock.json  # 鎖定文件
    README.md  # 用戶手冊
    vue.config.js  # vue的配置文件

xx.vue組件文件內容

1.在xx.vue中就三部分內容
    1.專門寫組件內的html內容
        <template>
        </template>
    2.專門寫組件的樣式
        <style>
        </style>
    4.專門寫js代碼
        <script>
        </script>
2.在main.js中學到的
    以后在App.vue中寫
    new Vue({
        render: h => h(App)
    }).$mount('#app')

es6的導入導出語法

js從es6開始支持包的導入導出
默認導入導出
    導出語法
        export default  # 默認導出語法，只能導出一個，一般是導出一個對象
    導入語法
        import 別名 from '路徑'  # 別名就是我們導出的對象
      
命名導入導出
    導出語法，可以導出多個
        export const name=name
        export const add=add
    導入語法  
        import {name, add} from './zyg/s1'  # 路徑中的s1為s1.js，.js可以省略，如果導出多個變量名，但是只用到一個，那么就在大括號內只導入用到的變量名
        
導入的簡寫
    如果我們導入的是包下的index.js那么index.js可以省略，只寫包
    

vue項目編寫步驟

1.組件導出
    export default {
        name: 'HelloWorld',
        data() {
            return {
                xx: '姓名'
            }
        },
    }

2.在別的組件中導入注冊
    import HelloWorld from '@/components/HelloWorld.vue'  # @指代的是src的路徑
    # 注冊
    export default {
        components: {
            HelloWorld
        }
    }

解決跨域

1 裝模塊
	pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

2 注冊app
	'corsheaders'
3 中間件修改
	'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'
)

scoped

父組件的樣式在子組件中也會生效，我們可以加入scoped讓該樣式只在當前組件中生效
<style scoped>
h1 {
  background-color: chartreuse;
}
</style>