VUE——腳手架

單文件組件介紹

vue-cli3 開發單文件組件

目前使用 vue 存在的缺點

1.全局定義組件的名字不能重復

2.字符串模板，es6 雖然提供了模板字符串，但需要特殊符號時，整個模板就會顯得不整潔

3.不支持 css

4.沒有構建步驟

單文件組件可以解決以上問題，在 vue 中把 .vue 的文件稱為 單文件組件，webpack 構建工具可以識別 .vue 文件

安裝Vue-cli3腳手架

第一步：官網下載并安裝 node 

第二步：檢測 node 是否安裝成功 命令行：node -v 查看版本

第三步：為了以后下載安裝插件便利，安裝淘寶鏡像源

npm install -g cnpm --registry=https://registry.npm.taobao.org
以后 npm 可以代替 cnpm 

第四步：安裝 Vue Cli3 腳手架

cnpm install -g @vue/cli

第五步：檢查其版本是否正確

vue --version

快速原型開發

使用 vue server 和 vue build 命令對單個 *.vue 文件進行快速原型開發，不過這需要額外安裝一個全局的擴展

npm install -g @vue/cli-service-global

vue server 的缺點就是它需要安裝全局依賴，這使得它在不同機器上的一致性不能得到保證。因此這只適用于快速原型開發

新建項目

選中需要文件夾，在終端打開

第一步：npm init  初始化，可以設置項目名、版本、作者等信息，不需要設置的直接回車

第二步：在文件中查看生成的 package.json 文件

第三步：新建 App.vue 文件，編寫組件信息

<template>
    <div>
        <h3 class="active">{{msg}}</h3>
    </div>

</template>

<script>
export default {
    data(){
        return{
            msg:'這個是個腳手架'
        };
    }
};
</script>

<style scoped>
    .active{
        color: red;
    }
</style>

App.vue

第四部：在終端使用 vue serve ，使其在瀏覽器中打開

這種方法僅限于快速原型開發，歸根結底還是要使用 vue.cli3 來啟動項目

vue-cli3生成項目

第一步：創建項目 vue create mysite

第二步：選擇 Manually select features，首次創建項目需要設置模板，使用空格進行選中，最后設置模板名稱，在下次創建項目時可以直接使用

第三步：進入項目目錄 cd fileName

第四步：啟動項目 npm run serve

Vue中使用第三方組件(element-ui)

第一步：安裝 npm i element-ui -S，在 vue-cli 中可以使用 vue add element 安裝

第二步：引用