前端开发Vue-cli脚手架工具。

2019年最新前端开发面试题
前端开发人员面试问题
应届生前端开发面试

vue-cli是vue提供的脚手架工具。

什么是脚手架:在工地山工人搭建的这些架子就是脚手架,会帮助工人们完成一些工作。

在技术圈里面,脚手架就是帮助我们编写一些基础的代码。

vue-cli脚手架可以:

         [color=#92d050]  1.生成目录结构

           2.本地开发调试

           3.代码部署 (代码编写完成后,对其压缩)

           4.热加载(提高我们编程效率)

           5.单元测试 (测试我们代码功能)
vue-cli是如何进行安装和使用的?

1.打开官网(GitHub) https://github.com/vuejs/vue-cli ,找到read me模块
           2.查看到安装的信息,我们需要node.js4以上的版本,npm需要在3的版本以上,

           3.当满足这个条件之后后,我们使用$ npm install -g vue-cli  (-g全局安装,全局安装后呢,就提供了vue这个命令),

           4.选择初识化的一个模板,$ vue init <template-name> <project-name>,

             官网给我们推荐了三个模板,1.基于webpack和browserify(分功能比较全的和功能简单的两个版本),

             使用webpack模板后生成的目录如下网址所示:

             https://github.com/vuejs-templates/webpack   (打开template文件夹)

           5.回头看,<project-name>它是在我们本地生成一个文件夹,文件夹里面放的就是我们刚看的template模板的目录结构,

安装vue-cli:

           1.打开命令行窗口,输入npm install -g vue-cli,回车  (有一个安装的过程,就可以全局安装了),

           2.等安装完成后,就可以使用vue这个命令,可以先看一下它的版本号:vue -V  (出现版本号说明我们已经安装成功了,可以使用vue这个命令了)

           3.下面开始下载模板,vue init webpack vue-example1 (其中vue-example1是我们在本地创建的文件夹)(回车)

           4.下一步需要对第三方的模块进行安装,先cd进入到目录下边:

               cd vue-example1
               npm install (把所有的模板全安装,有很多模块,安装需要过程) 

           5.安装好后,启动应用,打开vue-example1 文件夹后,在window系统下,按住shift键,右击----选择在此处打开命令行窗口

           6.打开之后输入npm run dev  (启动应用) (这个是在package.json中配置的)(启动应用后,自动会跳到welcome to Your Vue.js APP页面),

 

           7.嫌这样启动麻烦?每次都要输入一次,有没有另一种启动方式呢?

           8.将整个项目放入IDE里面,讲解的老师用的是webstrom,来看一下webstrom是怎么来启动我们应用的:

                 一.打开package.json文件,这里面是我们项目的配置,和一些信息的描述,其中scripts这一项,是我们定义的一些脚本,其中我们刚才跑的npm run dev

                   就是用的这个命令:  "dev":"node build/dev-server.js",它会去执行一下这一串"node build/dev-server.js",其实就是用node来跑一个js文件。

           9.在webstrom中呢,右击,找到Show npm Scripts,把这些指令都会显示出来,如:dev 
                                                                                     start
                                                                                     build 
                                                                                     lint

              想启动它,只需要双击就可以,例如:双击以下dev  (等待过程,可以看到,正在启动"node build/dev-server.js")  (自动跳转到welcome to Your Vue.js APP页面了) (应用打开了)

           10.回过头来看我们打开的应用,应用的源码在哪里写着的?所有源码都是在srcz在src这个目录下。src文件夹下main.js是我们的入口文件,
      
                           (main.js的一些说明)

                在入口文件里面有一些注释,告诉你你可以使用import来进行加载,也可以在运行的时候,去webpack.base.conf中设置一些别名,

                我们使用到了vue,所以要把vue用import把它导进来,   import Vue from "vue",

                还导进了App        import App from "./App"     (./App 是相对路径,相对main.js这个文件,其实就是App.vue这个文件,在webpack.base.conf中配置之后,就可以不用写后缀名了),

                还导进了router     import router from "./router"  (因为我们在选择使用模板的时候,使用了router,所以它会自动把router配置好,把这个目录加载进来)
                                                                  (它其实加载得失router文件夹下面的index.js,可以简写,不用写index.js就行了)

                Vue.config.productionTip = false  (关闭我们生产环境的一些提示),

 new Vue({              //启动我们的应用                
    el:"#app",          //挂载点,以id=app  这么一个元素作为挂载点 
     router,            //路由,(如果说想在应用中使用路由这个功能,先把它给注入进来,router,是ES6的语法,可以写成router:router,其实就是我们导进过来的对象import router from "./router")
     template:'<App/>',//应用的模板,用到了App这么一个组件,其实就是我们导进的App:import App from "./App" ,用的时候要注意,先要通过 components:{ App }把它给注册进来
     components:{ App }

});

11.App.vue这个文件做了一些什么事情?(是我们整个组件的一个入口)

            分为三个部分:   1.模板template        

                             2.逻辑 script

                             3.样式 style

<template>
<div id=”app”>
<img src=”./assets/logo.png”> //相对路径 加载了一个logo
<router-view></router-view> //路由匹配到那些路径加载的视图
</div>
</template>

<script>
export default { //ES6的语法 export default后面导出一个对象
name: ‘app’ //定义一下当前组件的名字,需要用的时候把这个组件給导出去
}
</script>

12.看一下路由是怎么起作用,把<router-view></router-view> 放到App.vue这个文件中的?

13.打开router下的index.js这个文件,这里面就是跟我们路由一些配置相关的,

一.用到了vue,把它加载进来:import Vue from 'vue',

二.也用到了router,把它加载进来:import Router from 'vue-router',

三.import HelloWorld from '@/components/HelloWorld'  一个别名,在build文件夹里有一个webpack.base.conf.js文件,这里面是webpack的配置:

 在这个文件里可以看到这一项配置:resolve: {
                                           extensions: ['.js', '.vue', '.json'],    // 加载文件的时候不用写后缀名,(是因为在这里面已经配置过了)
                                           alias: {
  'vue$': 'vue/dist/vue.esm.js',   //别名   @符号就代表了src这个路径
  '@': resolve('src'),
}

},

所以 import HelloWorld from ‘@/components/HelloWorld’ 的意思相当于 import HelloWorld from ‘src/components/HelloWorld’

14.Vue.use(Router) 作用是用来安装vue-router这个插件的,可以扩展vue的功能,之后再去安装插件的时候都会使用到vue.use这个函数

15.export default new Router({
routes: [
{
path: ‘/’,
name: ‘Hello’,
component: HelloWorld
}
]
})

export default //ES6提供的,用来导出这个模块里面某些API的,导出的是用new Router来创造的一个实例,

routes: [ //这个函数里我们其实传过去就是对路由规则的配置
{
path: ‘/’, //斜杠代表根目录下边,如果我们访问根目录下面,它渲染的是component对应的视图,就是hello这么一个组件
name: ‘Hello’,
component: HelloWorld
}
]

前端开发面试
web前端开发面试问题
前端开发布局面试题
» 本文来自:前端开发者 » 《前端开发Vue-cli脚手架工具。》
» 本文链接地址:https://www.rokub.com/7977.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!