Vue从入门到应用的实践【vue2.0- vue-cli】

Vue 创建项目安装脚手架步骤
1. 安装Nodejs
  1. http://blog.csdn.net/xxmeng2012/article/details/51492149
2. 安装 vue-cli VUE的脚手架工具
  1. npm install -g vue-cli
3. 查看vue版本
  1. vue -v （vue -V）
4. 初始化 init 一个以 webpack 为模板的名叫 vue-demo-cnodejs 的项目
5. https://www.cnblogs.com/wisewrong/p/6255817.html
  1. 切换进入执行命令的目录
    1. cd XXX
  2. 创建项目
    1. vue init webpack vue-demo-cnodejs
  3. Install & run
    1. npm install
    2. npm run dev
6. vue中使用stylus
  1. npm install stylus --save-dev
  2. npm install stylus-loader --save-dev
  3. 我的使用方法
    1. 创建和使用
      1. 文件目录结构
      3. variable.styl配置参数
      5. mixin.styl
      7. base.styl
      9. index.styl
      11. main.js[vue-lazyload + index.styl]
  4. 页面中使用
7. vue中使用less[具体更详细的使用自行百度]
  1. 安装less依赖：npm install less less-loader --save
  2. 修改webpack.base.config.js 文件配置loader加载依赖
  3. ```
  {
  	test: /\.less$/,
  	loader: "style-loader!css-loader!less-loader"
  }
```
8. 配置
  1. webpack.base.config.js 配置 alias
    1. webpack.base.conf.js
      1. 'common': resolve('src/common'), 'components': resolve('src/components')
  2. config->index.js 配置跨域
    1. ```
    proxyTable: {
      '/api': {
         target: 'http://test4.xcop.cn/',
         changeOrigin: true,
         pathRewrite: {
         '^/api': '/'
        }
      }
    }
```
2. axios->API 调用后台接口
  1. 安装axios和使用
    
    1.https://www.cnblogs.com/hasubasora/p/7118846.html
    
    2.https://blog.csdn.net/binginsist/article/details/65630547
    
    3.https://blog.csdn.net/hant1991/article/details/74931158
9. vue中使用vue-lazyload 懒加载
  1. npm install vue-lazyload --save
10. vue中使用vue-validator表单验证
  1. https://github.com/kazupon/vue-validator/tree/2.x/docs/zh-cn
11. vue中使用极验验证
  1. https://mp.csdn.net/postedit/79921967
12. vue中使用swiper/vue-awesome-swiper轮播图
  1. https://surmon-china.github.io/vue-awesome-swiper/
13. 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}}
```
	
	
```
14. 取消数据绑定时出现的代码闪烁 :v-cloak
15. vue跳转
  1. https://www.cnblogs.com/wisewrong/p/6277262.html
16. 根据后台传值判断进入哪个模板的使用[api.js 已修改为图上的变量名apidomain]...

Vue从入门到应用的实践【vue2.0- vue-cli】

猜你喜欢