VUE脚手架的搭建（引入axios，vue-router，ui框架步骤）

目录

vue脚手架 两个版本 安装步骤

vue脚手架引入axios的三种形式

在脚手架中引入 vue-router

在vue脚手架中引入 ui框架

---

 

vue脚手架 两个版本 安装步骤

如果想要使用vue脚手架 前提你的电脑上边必须安装nodejs

                1 vue 2.x版本     vue-cli
                    安装步骤：
                        1 全局安装vue-cli
                        npm install --global vue-cli
                        2 创建一个基于webpack模板的新项目
                        vue init webpack 项目名
                        3 进入项目目录
                        cd 项目名
                        4 运行你的项目
                        npm run dev

                2 vue 4.x版本     @vue/cli
                    我们需要nodejs的版本为8.9及其以上版本进行支持

                    注意：
                        如果想要使用@vue/cli 我们需要将vue-cli卸载掉
                        卸载命令
                            npm uninstall vue-cli -g

                        官方也说 可以让4.X 和 2.X可以互相切换使用   
                            但是一般情况下 我们的电脑上边只安装一个版本

                    安装：
                        1 全局安装@vue/cli
                        npm install -g @vue/cli
                        或者使用
                        yarn global add @vue/cli
                        安装之后可以使用 vue --version 来验证一下是否安装成功

                        2 使用 vue create 项目名  来创建项目

                        3 进入项目目录
                        cd 项目名
                        4 运行项目
                        npm run serve

vue脚手架引入axios的三种形式

                    方法一:
                        局部引入axios    哪个组件想要请求数据 就需要在里边引入一次axios
                        1 使用npm进行安装
                            npm install axios --save-dev

                        2 在需要请求数据的组件中引入 axios
                            import axios from 'axios'

                        3 在需要使用axios的地方 写上  axios.get()

                    方法二:
                        全局引入axios
                        1 安装axios
                            npm install axios --save-dev

                        2 在main.js文件中引入axios
                            import axios from 'axios'

                        3 将axios设置给vue原型对象  
                            Vue.prototype.axios=axios

                        4 在需要使用axios的地方直接写上 this.axios.get()

                    方法三:
                        全局引入axios
                        1 安装axios和vue-axios
                        npm install axios vue-axios --save-dev

                        2 在main.js文件中引入 axios vue-axios
                        import axios from 'axios'
                        import VueAxios from 'vue-axios'

                        3 调用Vue.use()
                        Vue.use(VueAxios, axios)

                        4 在需要使用axios的地方 写上 this.axios.get()

在脚手架中引入 vue-router

                    1 安装vue-router
                        npm install vue-router --save-dev

                    2 创建一个router.js文件  引入vue-router
                        import VueRouter from 'vue-router'

                    3 在router.js中引入vue 并且调用Vue.use() 方法
                        Vue.use(VueRouter)

                    4 在router.js中创建router实例对象并且导出
                        const routes=[
                        {
                            path: '/',
                            component: index
                        }]

                        const router=new VueRouter({
                            routes
                        })

                        export default router

                    5 在main.js文件中引入并且创建router实例
                        import router from './router'

                        new Vue({
                            router
                        })

                        路由组件不需要注册

在vue脚手架中引入 ui框架

                    1 使用npm安装element-ui
                    npm install element-ui --save-dev
                    
                    2 在main.js文件引入element-ui
                    import ElementUI from 'element-ui'
                    import 'element-ui/lib/theme-chalk/index.css';

                    3 需要调用Vue.use()方法 来使用element-ui
                    Vue.use(ElementUI)