第一天 - 項目創(chuàng)建

在gitee上創(chuàng)建倉庫

安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安裝vue-cli

cnpm install --global vue-cli

創(chuàng)建一個基于 webpack 模板的新項目

vue init webpack vue-shop

根據(jù)package.json文件,啟動項目

npm run dev

vue項目如何引入element-ui ???

第一步:下載element-ui到項目node_modules

npm i element-ui -S

第二步:將element-ui引入到項目中,只需在main.js中編輯如下代碼

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)

在vue項目中引入less

npm install less less-loader --save-dev
npm install less-loader@4.1.0 --save

安裝完成后打開 build目錄，修改 webpack.base.conf.js 中的相關配置：
在 module.exports 中找到 module 中的 rules 數(shù)組
添加如下代碼：

module.exports = {......module: {rules: [{...},{...},{test: /\.less$/,loader: 'style-loader!css-loader!less-loader'}] }

補充說明:
一般直接安裝less會報錯[ npm install less less-loader --save-dev ],因此我直接安裝指定低版本的less.

疑惑點

@符號的使用?
在vue項目中 @ 符號代表的是根目錄，即 src 目錄。

登錄模塊

在assets文件夾下創(chuàng)建了css文件夾,在css文件夾下,創(chuàng)建了global.css全局樣式文件.在main.js入口文件引入.

中央盒子,圖像區(qū)域,表單區(qū)域

引入阿里巴巴圖標庫 參考鏈接:https://blog.csdn.net/junshangshui/article/details/82193922

表單數(shù)據(jù)的雙向綁定

表單驗證 1)表單綁定驗證規(guī)則對象2)在data中指定驗證規(guī)則3)porp給不同的表單項指定驗證規(guī)則

表單重置

表單登錄前預校驗

在main.js中配置axios.發(fā)起登錄請求,參考鏈接:https://www.jianshu.com/p/02e7279046cf

配置彈框提示: Elementui Message 消息提示 (忽略)

完善登錄成功之后的操作:1)保存token; 2)編程式路由跳轉(zhuǎn)

路由導航守衛(wèi)控制訪問權限 router.beforeEach(to,from,next)

退出功能:1)清空token; 2)重新跳轉(zhuǎn)到登錄頁

總結(jié)

以上是生活随笔為你收集整理的vue-shop电商管理后台的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。