Vue項目環境搭建
"""
node ~~ python：node是用c++編寫用來運行js代碼的
npm(cnpm) ~~ pip：npm是一個終端應用商城，可以換國內源cnpm
vue ~~ django：vue是用來搭建vue前端項目的
1) 安裝node
官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
2) 換源安裝cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安裝vue項目腳手架
>: cnpm install -g @vue/cli
注：2或3終端安裝失敗時，可以清空 npm緩存 再重復執行失敗的步驟
npm cache clean --force
"""
Vue項目創建
1) 進入存放項目的目錄
>: cd ***
2) 創建項目
>: vue create 項目名
3) 項目初始化
pycharm配置並啟動vue項目
1) 用pycharm打開vue項目
2) 添加配置npm啟動
vue項目目錄結構分析
├── v-proj
| ├── node_modules // 當前項目所有依賴，一般不可以移植給其他電腦環境
| ├── public
| | ├── favicon.ico // 標簽圖標
| | └── index.html // 當前項目唯一的頁面
| ├── src
| | ├── assets // 靜態資源img、css、js
| | ├── components // 小組件
| | ├── views // 頁面組件
| | ├── App.vue // 根組件
| | ├── main.js // 全局腳本文件（項目的入口）
| | ├── router
| | | └── index.js// 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系）
| | └── store
| | | └── index.js// 倉庫腳本文件（vuex插件的配置文件，數據倉庫）
| ├── README.md
└ └── package.json等配置文件
vue組件(.vue文件)
# 1) template：有且只有一個根標簽
# 2) script：必須將組件對象導出 export default {}
# 3) style: style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>
全局腳本文件main.js（項目入口）
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
改寫
import Vue from 'vue' // 加載vue環境
import App from './App.vue' // 加載根組件
import router from './router' // 加載路由環境
import store from './store' // 加載數據倉庫環境
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
如何把一個vue項目拿到本地運行
'''
首先你要有這樣一個思路，就是任何一個項目，都是在一個適合自己的特定環境下運行的，所以我們在拷貝項目的時候，可以把核心代碼拿下來然后在本地安裝環境。VUE項目就是如此。
具體思路就是：
1.拷貝public、src、package.json，前兩個是核心代碼，后面的是環境配置。
2.執行cnpm/npm install，會生成node_modules的文件夾。
3.npm run serve 運行項目就ok了。
'''
