- Vue 创建项目安装脚手架步骤
- 安装Nodejs
- 安装 vue-cli VUE的脚手架工具
- npm install -g vue-cli
- 查看vue版本
- vue -v (vue -V)
- 初始化 init 一个以 webpack 为模板的名叫 vue-demo-cnodejs 的项目
- https://www.cnblogs.com/wisewrong/p/6255817.html
- 切换进入执行命令的目录
- cd XXX
- 创建项目
- vue init webpack vue-demo-cnodejs
- Install & run
- npm install
- npm run dev
- 切换进入执行命令的目录
- vue中使用stylus
- npm install stylus --save-dev
- npm install stylus-loader --save-dev
- 我的使用方法
- 创建和使用
- 文件目录结构
- variable.styl配置参数
- mixin.styl
- base.styl
- index.styl
- main.js[vue-lazyload + index.styl]
- 创建和使用
- 页面中使用
- vue中使用less[具体更详细的使用自行百度]
- 安装less依赖:npm install less less-loader --save
- 修改webpack.base.config.js 文件 配置loader加载依赖
-
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" }
- 配置
- webpack.base.config.js 配置 alias
- webpack.base.conf.js
-
'common': resolve('src/common'), 'components': resolve('src/components')
-
- webpack.base.conf.js
- config->index.js 配置跨域
-
proxyTable: { '/api': { target: 'http://test4.xcop.cn/', changeOrigin: true, pathRewrite: { '^/api': '/' } } }
- axios->API 调用后台接口
-
- webpack.base.config.js 配置 alias
- vue中使用vue-lazyload 懒加载
- npm install vue-lazyload --save
- vue中使用vue-validator表单验证
- vue中使用极验验证
- vue中使用swiper/vue-awesome-swiper轮播图
- vue怎样将时间戳转化为日期格式
export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() } for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) } } return fmt } function padLeftZero (str) { return ('00' + str).substr(str.length) } -------------------------------------------------------------------
{{time | formatDate}}
- 取消数据绑定时出现的代码闪烁 :v-cloak
- vue跳转
- 根据后台传值判断进入哪个模板的使用[api.js 已修改为图上的变量名apidomain]...