Vue 學習之路(1)

前言:1.前一陣子斷斷續續的學習,沒有系統的整理思路,學下來記錄一下。

           2.本人是phper js不好,學這個只是爲了寫個前後端分離的後臺。只適合新手參考。只適合新手參考。只適合新手參考。

一、建議直接用腳手架,script引入有很多東西用起來不方便。

二、Ubuntu 安裝vue-cli (我的是Ubuntu18.04)

       1.sudo apt install npm  (需要升級)     sudo npm install npm@latest -g   升級到最新版本  查看版本(npm -v   node -v)

       2.sudo npm install -g n  安裝用於安裝nodejs的 n 模塊       sudo n lts  升級node到最新穩定支持版本

          (sudo n v8.11.3 )安裝指定版本的nodejs

       3.sudo npm install --global vue-cli 安裝Vue腳手架       查看版本  ( vue -V )

        ps:window系統 從官網下載安裝文件  安裝好了以後用window自帶的 powerShell  往下進行

三、開始創建第一個Vue項目

        1.npm install-g cnpm --registry=https://registry.npm.taobao.org 安裝淘寶鏡像

        2.sudo mkdir /srv/vue     新建一個vue項目文件夾(也可以是其他位置)

        3.cd /srv/vue   

           vue init webpack my-project   一路根據提示回車 或者 Y就可以

        4.cd my-project     進入創建的項目目錄 

           sudo cnpm Install

           sudo  cnpm run dev 

        5.然後會看到 http://localhost:8080    瀏覽器打開 這個鏈接 就可以看到第一個項目的樣子。

                               

四、接下來要開始看代碼了

       1. cd /srv/             

           sudo chmod -R 755 vue/       給項目寫入的權限

        2.用編輯器打開項目 my-project 我們新手們 一般只操作 src文件夾下的文件。。(我用的webstorm)

        3.我們可以發現 顯示都是.vue文件 而且可以重複利用固定的模板

         <template></template><script></script><style></style>

        4.可複用性

           import Hellofrom "./components/Hello"
           export default {
                     name: "App",
                     components: {
                     Hello,
                    },
             }

         5.這些都比較簡單 可以跟着 菜鳥教程 走一遍就可以

五、未完待續...

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章