前言: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.這些都比較簡單 可以跟着 菜鳥教程 走一遍就可以
五、未完待續...