用vue開發乙個app(3,三天的成果)

2022-07-27 05:06:13 字數 4077 閱讀 9516

乙個vue的demo

.

|-- config // 專案開發環境配置

| |-- index.js // 專案打包部署配置

|-- src // 原始碼目錄

| |-- components // 公共元件

| |-- header.vue // 頁面頭部公共元件

| |-- footer.vue // 頁尾頭部公共元件

| |-- index.js // 載入各種公共元件

| |-- config // 路由配置和程式的基本資訊配置

| |-- routes.js // 配置頁面路由

| |-- css // 各種css檔案

| |-- common.css // 全域性通用css檔案

| |-- iconfont // 各種字型圖示

| |-- images // 公共

| |-- less // 各種less檔案

| |-- common.less // 全域性通用less檔案

| |-- pages // 頁面元件

| |-- home // 個人中心

| |-- index // **首頁

| |-- login // 登入

| |-- signout // 退出

| |-- store // vuex的狀態管理

| |-- index.js // 載入各種store模組

| |-- user.js // 使用者store

| |-- template

// 各種html檔案

| |-- index.html // 程式入口html檔案

| |-- util // 公共的js方法,vue的mixin混合

| |-- main.js // 程式入口檔案,載入各種公共元件

|-- .babelrc // es6語法編譯配置

|-- gulpfile.js // 啟動,打包,部署,自動化構建

|-- webpack.config.js // 程式打包配置

|-- server.js // **伺服器配置

|-- readme.md // 專案說明

|-- package.json // 配置專案相關資訊,通過執行 npm init 命令建立

.

webpack相關模組

webpack                               // 用來構建打包程式

webpack-dev-server // 開發環境下,設定**伺服器

html-webpack-plugin // html 檔案編譯

url-loader // 轉化成base64格式

file-loader // 字型 將字型檔案打包

css-loader // css 生成

less // css 預處理器less

less-loader // css 預處理器less的webpack外掛程式

style-loader // css 插入到style標籤

autoprefixer-loader // css 瀏覽器相容性問題處理

babel-core // es6 **轉換器

babel-loader // es6 **轉換器,webpack外掛程式

babel-plugin-transform-object-assign // es6 object.assign方法做相容處理

babel-preset-es2015 // es6 **編譯成現在瀏覽器支援的es5

babel-preset-stage-0

// es6 es7要使用的語法階段

vue-loader // vue 元件編譯

babel-helper-vue-jsx-merge-props // vue jsx語法編譯

babel-plugin-syntax-jsx // vue jsx語法編譯

babel-plugin-transform-vue-jsx // vue jsx語法編譯

gulp相關模組

gulp                                  // 用來構建自動化工作流

gulp-sftp // 將**自動部署到伺服器上

del // **部署成功後,刪除本地編譯的**

其他模組

cross-env                             // 解決跨平台設定node_env的問題

vue全家桶

vue                                   // 構建使用者介面的

vue-router // 路由

vuex // 元件狀態管理

/login                                // 登入,不需要登入可以訪問

/signout // 退出登入,需要登入後才可以訪問

/home // 個人中心,需要登入後才可以訪問

/ // 首頁,不需要登入可以訪問

* // 強制跳轉到登入頁面

npm install

npm run dev

用 Vue 做乙個簡單的購物app

一整個專案寫下來,最大的感覺就是元件式開發,管理起來實在是太舒服了。而且vue中寫scss還可以指定區域性有效。這樣寫起scss感覺安全多了。用 vuex 進行全域性資料管理也挺舒心的。element ui 則大大解放了生產力。上述技術棧簡要說明 vue cli vue cli 就是使用搭建vue專...

關於用MUI開發APP的乙個小總結

總結一點問題 一,關於固定定位的問題 其實在ios下固定定位並不穩定,特別是在使用者輸入內容的時候,固定定位就會出問題,其實我是比較想用絕對定位來模擬固定定位的,但是因為很多東西不是很熟悉,加上mui框架都是這麼用固定定位的,所以這種小bug我也就沒管了 二,沉浸式導航的問題 在我們做沉浸式導航的時...

用PHP編寫乙個APP的API

標籤 空格分隔 php 手機後台 api 通訊介面 andy php是世界上最強大的語言。php開發手機api時,一般返回xml或json資料型別的資料,除了要返回從源資料 程式本身需要的資料 外還應附上狀態碼,以下是一段封裝後的資料,它使用json格式展現 以下是xml格式資料的例項 200suc...