vue的專案搭建

2021-08-13 16:56:59 字數 1616 閱讀 3848

ie6-ie8不支援es5,vue, ie9+支援

vue是mvvm框架

mvvm框架

針對具有複雜的互動邏輯的前端應用。

提供基礎的架構抽象

通過ajax資料持久化,保證前端使用者體檢

vuejs

1.是乙個輕量級的mvvm的前端框架

2.資料驅動+元件化的前端開發

vue,angular和react對比

vuejs的核心思想

1.資料(model)改變驅動檢視(view)的自動更新

2.vuejs的元件(實現**的復用)

元件的設計原則:每個元件對應乙個工程目錄,元件所需要的各種資源在這個目錄下面就近維護(.vue檔案)

vue-cli

vue-cli是vuejs的腳手架工具(幫助我們寫好vuejs**的工具)

幫助:目錄結構,本地除錯,**部署,熱載入,單元測試等工作

1.基本結構

2.調整目錄結構

3.模擬假資料

//模擬後台資料

const express = require('express')

// 編寫路由

const apiroutes = express.router()

並在devserver欄位中新增介面

// 商家介面

res.json()

}),// 商品介面

("/api/goods", (req,res) =>)

}),("/api/ratings", (req,res) =>)})}

4.編寫規則修改

rules欄位下面新增

"semi":["error","always"],//必須有分號

"indent":0

//不需要有縮排

4.main.js的編寫
import vue from 'vue';

import vuerouter from 'vue-router';

import goods from './components/goods/goods';

import seller from './components/seller/seller';

import ratings from './components/ratings/ratings';

vue.use(vuerouter);//使用路由

// 定義路由規則

const routes = [

, ,

];// 建立router例項

const router = new vuerouter();

new vue(

};script>

vue專案搭建

前提安裝好node不再贅述 可以在自帶的命令列中執行,也可以在webstome中執行 安裝cnpm npm install g cnpm registry 安裝webpack 這一步可以省略,反正你也不會用 cnpm install webpack g 全域性安裝 vuecnpm install g...

Vue專案搭建

vue cli 專案搭建及常用外掛程式安裝,報錯解決 環境搭建 node v 檢測版本 2.安裝webpack npm install webpack g webpack v 檢測是否安裝成功 專案搭建 1.npm install vue cli g vue v 接下來的步驟有兩種方式 1 cd 進...

vue專案搭建

1 安裝 映象,用cnpm裝東西很省事,目前沒被坑過 一下命令在cmd中完成 可以不按裝 npm install g cnpm registry 2 安裝vue腳手架 cnpm install g vue cli測試是否成功安裝 vue v 3.進入安裝的資料夾目錄,構建檔案結構目錄 vue ini...