Vue 安裝及配置

#1 安裝node，官網下載
    node -v
    v10.16.3
#2 安裝模組
	npm install 模組名
    
    #npm比較慢，用淘寶的cnpm來替換npm
    npm install -g cnpm --registry=https://registry.npm.taobao.org   

建立vue的工程（需要一個vue腳手架）
	cnpm install -g @vue/cli
    
如果出問題執行,再次安裝腳手架
	npm cache clean --force

建立vue專案
vue create luffycity
選Manually

啟動專案
npm run serve
 

Vue目錄介紹

public
    -favicon.ico   
    -index.html   
src
    -assets     #靜態檔案，js，css，img
    -components # 小元件，頭部元件，尾部元件
    -router     # 路由相關
    -store      # vuex相關，狀態管理器，臨時儲存資料的地方
    -views      # 頁面元件
    -App.vue    # 根元件
    -main.js    # 配置檔案（跟django的setting一樣）
    
       
#任何一個元件都有三部分
	<template>
    	
	</template>
    <style>
		
	</style>

    <script>
		
    </script>
 

Vue配置

報錯：

它說沒找到 svg 是個圖片 v拷貝的專案當然沒有圖片了！！！！！

npm install svg-sprite-loader --save-dev
沒有圖片，跟這個沒關係啊，，，

# 安裝 --save 安裝包的時候，看看有沒有
cnpm install axios
cnpm install vue-cookies
cnpm install element-ui
cnpm install jquery
cnpm install bootstrap@3

#在main.js中配置

#axios配置
import axios from 'axios'
Vue.prototype.$axios = axios;

# vue-cookies配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

# ElementUI的配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

# bootstrap配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

# jquery的配置

專案根路徑創一個 vue.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};