vue中脚手架的使用 （@vue-cli、@vue/cli）

vue脚手架

        Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

        vue脚手架中分为两个版本  下面介绍2.x和5.x版本

@vue/cli 5.x(推荐)

                安装步骤：
                    1 全局安装@vue/cli
                    npm install @vue/cli -g        vue --version  查看vue脚手架是否安装成功

                    2 创建项目
                    vue create 自定义项目名

                    3 进入项目 并且 运行项目
                    cd 自定义项目名
                    npm run serve


                public      index.html 
                src
                    assets     静态资源(图片 视频 音频 js代码 css样式 ...)
                    components 存放普通组件
                    router     配置路由文件
                    views      存放路由组件
                    app.vue
                    main.js

vue-cli 2.x

安装步骤：

                    1 全局安装 vue-cli
                    npm install --global vue-cli
                    
                    2 创建一个基于webpack 模板的新项目
                    vue init webpack 自定义项目名

                    3 进入项目目录 并且运行项目
                    cd 自定义项目名
                    npm run dev

生成目录

                    build                   执行打包压缩的文件
                    config                  全局配置文件
                    node_modules            当前项目里边所需要的依赖包
                    src                     当前vue项目的核心文件
                        assets              静态资源(图片 视频 音频 js代码 css样式 ...)
                        components          当前项目中所有的普通组件都需要存放当前文件
                        router              配置是当前vue项目的路由配置
                        app.vue             全局主入口vue文件
                        main.js             全局主入口js文件
                    index.html              当前项目的首页(根节点)  vue是单页面应用 
                    package.json            里边是当前项目的相关基本配置选项

                    以后写项目的时候 我们一般操作的是在src文件中编写你的项目

                    在vue项目中 普通组件都存放在components   
                    所有的路由组件都存放在views

在vue脚手架中引入axios

三种形式：

1 局部引入

                    1 直接在vue-cli中安装axios
                    npm i axios --save-dev
                    2 在需要请求数据的组件中引入axios
                    import axios from 'axios'
                    3 在需要使用axios位置上 写上 axios.get()  axios.post()

2 全局引入

                    1 安装axios
                    npm i axios --save-dev
                    2 在main.js文件中引入axios
                    import axios from 'axios'
                    3 将axios设置给vue原型对象
                    Vue.prototype.axios=axios
                    4 在需要使用axios的位置上直接写上this.axios.get()

3 全局引入

                    1 安装axios vue-axios
                    npm i 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若手动安装vue-router

            注意安装的vue-router版本号 (3.0.0)
            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()方法调用VueRouter
            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({
                el: "#app",
                router,
                ...
            })