1、全局安装node.js，检查是否安装成功

2、安装git

3、安装vue，检查是否安装成功

4、安装vue-cli，检查是否安装成功

https://cli.vuejs.org/zh/guide/installation.html

5、用vue-cli快速搭建项目

6、cd到目录文件，然后打开git，安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org

7、安装项目依赖 cnpm install

8、启动项目 npm run sever

9、浏览器上打开目标网址（启动时会出现在底部一般是端口：8080）

10、安装和引入静态文件

安装css-loader依赖包： npm install css-loader --save

使用sass： npm install sass-loader --save-dev

安装和main.js里导入jquery     --> npm install jquery                   import Jquery from "jquery"

安装和导入 lazyload   --> npm install lazyload                    import Lazyload from "lazyload"

安装和导入 lib-flexible   --> npm install lib-flexible --save                    import LibFlexible from "lib-flexible"

安装和导入 Swiper    --> npm install Swiper --save                     import Swiper from 'swiper'

引入css     import hvzhao from './assets/css/hvzhao.css'

引入css     import iconfont from './assets/css/iconfont.css'

在编辑器里面设置好css-rem或者Hbuilder工具-选项-Hbuilder-代码助手设置-px转换rem为75

以下为引入css成功，js已经打包进app.js

11、创建组件引入组件

12、关闭语法检验eslint警告--->package.json-->删掉"@vue/cli-plugin-eslint": "^3.1.1",

13、安装路由   cnpm install vue-router

创建路由配置文件

新增组件

路由总文件里添加组件路径

引用组件一定要先导入组件

路由知识点

{path:'*',redirect:'/'} 配置之后，地址栏中输入网址有误时会跳转到指定页面

redirect:'/'  是默认显示哪个路由

以下是二级路由和默认显示的路由

{path:"/",component:Index,redirect:"/enterprise-user",children:[
            {path:"/enterprise-user",name:"enterprise-user",component:EnterpriseUser},
            {path:"/government-park",name:"government-park",component:GovernmentPark}
         ]},

<router-view></router-view> <!--页面渲染放置的部分-->  这里会根据你在地址栏中输入的链接而跳转到对应的页面

几种跳转方法

a、页面内跳转方法

<!--<router-link to="/">跳转 1</router-link>-->
            <!--<router-link :to="homeLink">跳转 2</router-link>-->
            <router-link :to="{name: 'homeLink'}">跳转 3</router-link>

const routes = [
                {path:'/home',name:'homeLink',component:Case},
            ]

data(){
                return {
                    homeLink: '/'   //这里可以使用动态绑定url地址 在页面链接里加上:to="homeLink"
                }
            }*/

b、js跳转方法

<button @click="goToMenuPrev">点击跳转路由的方法,跳转到上一次浏览的页面</button>
            <button @click="goToMenuZhiDin">指定跳转的地址</button>
            <button @click="goToMenuName">指定跳转路由的名字下</button>
            <button @click="goToPush">最常用的是Push方法跳转，可以传更多参数</button>

export default {
            methods: {
                goToMenuPrev(){
                    this.$router.go(-1)
                },
                goToMenuZhiDin(){
                    this.$router.replace('me')
                },
                goToMenuName(){
                    this.$router.replace({name: 'meLink'})
                },
                goToPush(){
                    //this.$router.push('/case')
                    this.$router.push({name: 'meLink'})
                }
            }
        }

14、data return (){} 不会暴露出外面

15、滑动swiper组件

组件传值

camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名

1、

10000、axios请求

一般请求是用vue-resource，现在很多使用axios

注册野狗云 https://www.wilddog.com/dashboard

安装axios   cnpm install axios --save

在main.js配置axios

import axios from 'axios'

axios.defaults.baseURL = "https://野狗id.wilddogio.com/"

<script>
    import axios from 'axios'
    export default {
        data(){
            return {
                isShow: false,
                isError: false,
                errTips: "",
                mobilephone: "",
                phoneCode: "",
                password: "",
                confirmPassword: ""
            }
        },
        methods:{
            onSubmit() {
                let _this = this;
                //准备好数据 //传值
                const formData = {
                    mobilephone: this.mobilephone,
                    phoneCode: this.phoneCode,
                    password: this.password,
                    confirmPassword: this.confirmPassword
                }
                //正常注册
                let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                if(this.mobilephone == '' || this.password == ''){
                    this.isError = true
                    this.errTips = "手机号或者密码不能为空！"
                }else if(!reg.test(this.mobilephone)){
                    this.isError = true
                    this.errTips = "手机格式不正确！"
                }else{
                    this.isError = false
                    //提交数据  这里会获取到main.js里axios的基础链接   最后推送到野狗
                    axios.post('/users.json',formData)
                        .then(res => {
                            console.log(res)
                            this.isShow = true
                            setTimeout (function(){
                                _this.$router.push("/login")
                            },1500)
                        })
                }
                
                
                //验证是否已注册
                //axios请求野狗数据
                /*axios.get('/users.json')
                    .then(res => {
                        const data = res.data
                        const users = []
                        for(let key in data){
                            const user = data[key]
                            users.push(user)
                        }
                        console.log(users)
                        let result = users.filter((user) => {
                            console.log(user)
                            if(user.mobilephone === this.mobilephone){
                                this.isError = "手机号已注册"
                                return this.$router.push("/register")
                            }
                        })
                    })*/
            }
        }
    }
</script>

此处还需要验证是否已注册

//验证是否已注册（后续补上）

点击提交后把创建的user.json推送到野狗上

登录

<script>
    import axios from 'axios'
    export default {
        data(){
            return {
                isShow: false,
                mobilephone: "",
                password: ""
            }
        },
        methods:{
            onSubmit() {
                //axios请求野狗数据
                axios.get('/users.json')
                    .then(res => {
                        //console.log(res)
                        //console.log(res.data)
                        const data = res.data
                        const users = []
                        //遍历对象
                        for(let key in data){
                            const user = data[key] //每一个user
                            users.push(user)
                        }
                        //最终要拿到的数组
                        console.log(users)
                        //实现过滤
                        let result = users.filter((user) => {//拿变量接受
                            return user.mobilephone === this.mobilephone && user.password === this.password
                        })
                        console.log(result)
                        //判断result的长度是否大于0
                        if(result != null && result.length > 0){
                            this.$router.push('/')    
                        }else{
                            //alert("账号或者密码不对")
                            this.isShow = true
                        }
                        //this.$router.push("/login")
                    })
            }
        }
    }
</script>

状态管理vuex

1、安装 cnpm install vuex --save

2、新建store.js

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

Vue.use(Vuex)//使用Vuex

export const store = new Vuex.Store({
    state:{
        //设置属性
        currentUser:null,
        isLogin:false
    },
    getters:{
        //获取属性的状态
        //获取到设置的属性的状态
        currentUser:state =>  state.currentUser,
        isLogin:state => state.isLogin
    },
    mutations:{
        //改变属性的状态
        //更改用户的状态信息
        userStatUs(state,user){
            if(user){
                state.currentUser = user
                state.isLogin = true
            }else{
                state.currentUser = null
                state.isLogin = false
            }
        }
    },
    actions:{
        //应用mutations
        setUser({commit},user){
            commit("userStatUs",user)
        }
    }
})

登录之后，隐藏注册，修改头像信息

<script type="text/javascript">
    export default {
        data(){
            return {
                currentDefaultUser: "慧招用户",
                msgDefaultCount: 0
            }
        },
        methods:{
            
        },
        computed:{
            currentUser(){
                return this.$store.getters.currentUser
            },
            isLogin(){
                return this.$store.getters.isLogin
            }
        }
    }
</script>

在登录页需要修改登录状态

======》展示页面