前端Vue框架使用思路

好久好久没有写博客了，最近做了一个使用Vue框架的商场项目，此博客把vue学习和做项目的过程整理一下。

首先，在掌握html，css,javascript 的基础上，阅读Vue的官方文档，了解Vue框架的基本语法。

然后，配置Vue环境，分为以下三步：

1.安装node.js,要注意node的版本问题，可以使用n模块来管理node的版本，安装命令：npm install -g n, 通过node ls可查看已安装过哪些版本，使用/n 版本/命令进行切换

本人是mac 19pro， 因为系统版本10.15.2，安装会报错，故需要打命令：sudo chown -R $(whoami) /usr/local/*

2. 安装vue，安装vue脚手架，脚手架可以帮助我们快速的建立vue项目，安装命令：npm install -g @vue/cli

3创建项目，vue create 项目名

4启动UI，vue ui

5启动项目，npm run  serve

接下来就可以开始我们的项目了

创建vue实例

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from  'vue-axios'
import router from './router'
import './assets/css/base.css'
import './assets/css/index.css'
Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router, //router:router  
  render: h => h(App),
}).$mount('#app')

 

因为商场有多个页面，所以需要设置路由，这里使用路由的包Router.js

import Vue from  'vue'
import Router from 'vue-router'
import Cart from './pages/cart'
import Address from './pages/address'
Vue.use(Router);
export default new Router({
    routes:[
        {
            path:'/',
            name:'cart',
            component:Cart
        },
        {
            path:'/address',
            name:'address',
            component:Address
        }
    ]
})

然后就可以开发各个组件了

其中，1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。