01: vue.js安裝

時間 2019-11-19

原文原文鏈接

1.1 vue.js安裝與基本使用

　　官網：https://cn.vuejs.org/javascript

　　一、使用以前，咱們先來掌握3個東西是用來幹什麼的html

　　　　　　1. npm: Nodejs下的包管理器。
　　　　　　2. webpack: 它主要的用途是經過CommonJS的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。
　　　　　　3. vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只須要 npm install就能夠安裝）vue

　　二、下載安裝　　java

　　　　　　1. 下載node.js： https://nodejs.org/en/ （選擇左邊，不要選最新的）node

　　　　　　2. 安裝完成node.js後就會生成npm工具，安裝完成後便可下載其餘工具webpack

　　　　　　3. 利用npm安裝vue.js： npm install vue -g git

　　　　　　4. 安裝完成後會將文件下載到：D:\nodejs\node_global\node_modules 目錄下github

　　　　　　5. 咱們使用vue.js時只需到 D:\nodejs\node_global\node_modules 文件夾下，複製 vue.js 只需在使用時引用便可web

　　　　　　6. npm install -g cnpm -registry=https://registry.npm.taobao.org # 設置淘寶的倉庫路徑chrome

　　三、引入vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!-- 向容器中渲染新聞-->
    <div id="app">{{ msg }}</div>
    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">
        // 定義數據模型
        var data = {
            msg:"vue.js基本使用！！！"   // 使用的數據
        };

        // 定義視圖模型
        var app = new Vue({
            // 綁定視圖
            el:'#app',
            // 綁定模型
            data:data
        });
    </script>
</body>
</html>

vue.js基本使用

1.2 安裝vue中插件

　　一、配置模塊安裝路徑和環境變量（不然經過npm安裝的插件沒法再cmd中使用）

　　　　　　1. 首先安裝nodejs ,個人位置是D:\nodejs

　　　　　　2. 你本身能夠配置模塊安裝路徑：

　　　　　　　　npm config set prefix 「D:\nodejs\node_global」
　　　　　　　　npm config set cache 「D:\nodejs\node_cache「。

　　　　　　3. 再去配置環境變量，在系統變量裏新建 NODE_PATH ,值爲」D:\nodejs\node_global「，

　　　　　　4. 在用戶變量上的path變量添加」D:\nodejs\node_global「。這樣應該就能夠了

　　　　　　5. 有些包安裝後仍是下載到：C:\Users\tom\node_modules 文件夾下

　　二、安裝vue-devtools插件，便於在chrome中調試vue

　　　　　　1. 下載壓縮包：https://github.com/vuejs/vue-devtools

　　　　　　2. 安裝參考地址：https://segmentfault.com/a/1190000009682735

　　　　　　3. 因爲下載包編譯

　　　　　　　　直接將vue-devtools解壓縮，而後將文件夾中的chrome拖放到擴展程序中
　　　　　　　　//配置是否容許vue-devtools檢查代碼，方便調試，生產環境中須要設置爲false
　　　　　　　　Vue.config.devtools=false;
　　　　　　　　Vue.config.productionTip=false; //阻止vue啓動時生成生產消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            //配置是否容許vue-devtools檢查代碼，方便調試，生產環境中須要設置爲false
            Vue.config.devtools=false;
            Vue.config.productionTip=false; //阻止vue啓動時生成生產消息

            var vm=new Vue({
                el:'#itany', //指定關聯的元素
                data:{ //存儲數據
                    msg:'Hello World'
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}} <!-- 兩對大括號{{}}稱爲模板，用來進行數據的綁定顯示在頁面中 -->
    </div>

    <h3>
        {{msg}}
    </h3>
</body>
</html>