Vue项目开发中的常规操作 -- LC

一. 使用Vue-cli工具

1. 安装全局Vue-cli

npm install --global vue-cli

2. 创建一个基于webpack模板的项目

vue init webpack my-project
my-project就是需要使用到Vue-cli的项目名称。
之后会出现许多可选项让你进行选择。

3. 运行这个Vue项目

vue run dev 或者是 vue run start

二. 使用stylus的方式编写css

1.

cnpm install stylus --save
cnpm install stylus-loader --save

<style lang="stylus" scoped>
	// 普通的style标签只支持普通的样式 如果要使用scss 或 less就要为style标签设置lang属性
	// scoped 表示只会渲染本组件 不会全局渲染
</style>

移动端常用rem单位
1rem 为 html font-size

2.

样式里面不能直接使用import ’ '引入样式,而是要使用@import ’ '去引入

三. 使用iconfont图标库

前期准备
1. 登录iconfont官网创建项目,并将所需图标添加到项目中;
2. 下载所需图标到本地, 并将解压缩后的文件添加到项目中;
3. 修改iconfont.css文件添加src中的url地址;
4. 在项目中使用import导入iconfont.css文件;
具体使用
将所需位置的span类名定义为iconfont,然后添加十六进制字符标识

// 例如 以下形式进行使用
<span class="iconfont">&#xe743;</span>

四. 使用axios进行ajax数据的请求

axios非常强大可以实现跨品台的数据请求
前期准备
1. 安装axios：npm install axios --save

具体使用

methods: {
        getHomeInfo() {
            axios.get('/api/index.json')
                .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res) {
            console.log(res);
        }
    },
    mounted () {
        // 让页面挂载好了之后执行 getInfo() 这个函数
        this.getHomeInfo();
    }

五. 使用Vuex进行组件间数据共享

前期准备
1. 安装Vuex： cnpm install vuee --save
具体使用
1. 导入以及创建

import Vue from 'Vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        city: 'xxx'
    }
})

建议最好去看官网的那张图，很直观！！！

六. 项目上线

命令： cnpm run build