移动商城基础必备

一、插件 0、下载https://github.com/dcloudio/mui dist和example文件夹 css:icons-extra.css mui.css mui.min.css fonts:mui.tff mui-icons-extra.ttf js:mui.js mui.min.js

import ‘./lib/mui/css/mui.css’ import ‘./lib/mui/css/icons-extra.css’

1、npm install mint-ui@2.2 // 导入MintUI组件库 import MintUI from ‘mint-ui’ import ‘mint-ui/lib/style.css’

// 注册mint-ui Vue.use(MintUI)

2、安装css的预处理器： （1）npm install sass-loader@8.0 -D （2）npm install node-sass@4.13 -D 安装node-sass报错python问题： npm uninstall node-sass npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ （3）npm install sass@^1.3.0 -D （4）npm install fibers@>=3.1.0 -D

3、安装从后台数据库取值组件 npm i axios@0.19 npm install --save axios

4、重装vue-router npm uninstall vue-router npm install vue-router@3.0.0

5、安装vant npm i vant -S

6、安装scroll npm i better-scroll@1.15.2

二、格式 ----------------------针对eslint格式化问题创建一个.prettierrc--------------------------

{ "semi":false, //不加分号 "singleQuote":true, //把双引号替换为单引号 "trailingComma":none //尾随逗号 }

---------------------------------------.eslintrc.js------------------------------------------------

'space-before-function-paren':0, 'no-irregular-whitespace':0

三、样式 用户界面： @click="$router.push({name: ‘order’})

background: linear-gradient(90deg, #28a2ff, #ffd787); background: linear-gradient(90deg,#FFC500, #FF9402,#FF7A00); border-radius: 50%; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 15); border: 1px solid hsla(0, 0%, 100%, 4);

.mui-media-object { height: 30px; width: 30px; vertical-align: middle; margin-top: 5px; } .mui-table-view-cell:after { left: 0px; } 登录： import mui from ‘@/lib/mui/js/mui.min.js’ mui(’.mui-input-row input’).input()

列表： text-align: left; 每个内容-Padding 10 15 每个图片展示-8 12

line-height: 25px;

display:flex; justify-content: space-between; align-items: center;

*{ display:block }

详情： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

-----------------------------------min.css------------------------------------------- build error解决办法： 1、（input样式冲突） 2885-2919

/* select, textarea, input[type='text'], ..... -webkit-appearance: none; } */

3308-3340

.mui-input-range { /*input[type="range"] { -webkit-appearance: none; ....... content:' '; } }*/

2339

/*&:active { background-color: #eee; }*/

2、svg 1061和1069

\"<svg.....</svg>\"

https://download.csdn.net/download/u011388098/13028251 ----------------------------------vue-------------------------------------------------- 0、插件 chinese language live server 启动服务的热更新 vue vetur 代码高亮提示

nodejs

windows环境搭建Vue开发环境 https://www.cnblogs.com/zhaomeizi/p/8483597.html

1、在集成终端中打开

node hellow.js npm -v

npm i vue //下载vue安装包 npm init -y //无法成功安装（系统没有package.json文件造成的）

vue -v

vue执行命令时报错：无法加载文件…，因为在此系统上禁止运行脚本。 –管理员身份运行powershell，执行

set-ExecutionPolicy RemoteSigner Y

安装脚手架：

D:\work\vue\vuecli>npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v

//安装脚手架：npm install -g @vue/cli npm uninstall -g @vue/cli //创建vue项目，vue create my_app，默认配置default（babel，eslint） //下载完成后，有2个命令提示符： cd my-app //进入我的项目 npm run serve //启动我的项目

//显示complie successfully ctrl + 单击 本地地址 //浏览器中会显示

环境变量： 个人设置中的path，找到npm，复制路径在计算机中查找，找到vue；将vue的路径整体复制粘贴到个人path