vue項目環境搭建

一.環境搭建

1.安裝node

官網下載node.js,    https://nodejs.org/en/download/

2.安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝vue項目腳手架

cnpm install -g @vue/cli

4.在2或3終端安裝失敗時，能夠清空 npm緩存 再重複執行失敗的步驟

npm cache clean --force

2、項目的建立

1.在cmd運行下進入想要建立項目的文件下

>: cd ***

2.建立項目

vue create 項目名

3.項目初始化

1.選擇第二個選項Manually，手動配置

2.

4..啓動/中止項目

cnpm run serve / ctrl+c

2、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);
    },
});