Vue使用

一、準備工具

webstorm 、 nodejs 、vue配置

二、webstorm建立一個空專案

三、進入 dos cmd 命令輸入，切換到專案目錄下，安裝依賴

1. npm init or npm init -y ，會多出一個檔案

2. npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2017 babel-preset-stage-0 css-loader style-loader less less-loader file-loader url-loader html-webpack-plugin --save-dev

安裝所有能用到的依賴包（包括js、html、css、打包、和打包服務）

3. 然後依賴自動安裝成功

4. 再來看

5. 建立 、

Let報錯？

解決：設定JavaScript為ES6

6. 上面依然使用上了，index.html模板 和 main.js入口檔案

7. 然後打包和檢視效果，修改配置

8. 然後dos執行npm run dev檢視效果

擦，遇到問題，查一查，參考意見：

解決辦法：全域性安裝webpack-clinpm install webpack-cli -g

結果：一樣

再然後：

npm install webpack-cli -D

npm install webpack -D

OK成功，看結果

開啟瀏覽器chrome，訪問本地服務 http://localhost:8080/或

成功，沒有報錯。

然後編輯檔案：

然後，設定新增.vue檔案模板

.vue模板預設標籤：

<template>

    <div></div>

</template>

<script>

    export default{

        data(){

            return {}

        },

        methods:{},

        computed:{},

        components:{},

    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

然後建立新檔案app.vue: 要使用.vue檔案，需要安裝編譯使用的外掛：

安裝 vue-loader解析vue檔案的， vue-template-compiler用來解析vue模板的npm install vue-loader vue-template-compiler

新增依賴庫，編輯：    

然後編輯使用：

檢視效果，dos：npm run dev

瀏覽器訪問：