vue項目搭建與pycharm啓動vue

一 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啓動

　　pycharm啓動vue項目步驟如下：

 

 

 

 

四 vue項目目錄結構分析

├── v-proj
|    ├── node_modules      // 當前項目所有依賴，一般不可以移植給其他電腦環境
|    ├── public            
|    |    ├── favicon.ico    // 標籤圖標
|    |    └── index.html    // 當前項目唯一的頁面
|    ├── src
|    |    ├── assets        // 靜態資源img、css、js
|    |    ├── components    // 小組件
|    |    ├── views        // 頁面組件
|    |    ├── App.vue        // 根組件
|    |    ├── main.js        // 全局腳本文件（項目的入口）
|    |    ├── router.js    // 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關係）
|    |    └── store.js    // 倉庫腳本文件（vuex插件的配置文件，數據倉庫）
|    ├── README.md
└    └── **配置文件

 

五 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'  // 加載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);
    },
});