vue-cli及vue-router(一)

最新推荐文章于 2024-05-09 09:21:53 发布

tongwandouQX

最新推荐文章于 2024-05-09 09:21:53 发布

阅读量2.3k

点赞数 3

分类专栏： vue.js 文章标签：模块化webpack vue-cli

本文链接：https://blog.csdn.net/qianxing111/article/details/78526000

版权

vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.单文件组件

(1)问题：
使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，这种做法的缺点很多：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。
(2)单文件组件
文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
(3)解析打包.vue文件
vue为了能够使我们在项目开发中对组件进行更好的维护，提供了一个单文件组件系统，vue把每一个独立的组件放在一个.vue的文件中，在这个文件中提供基础三个自定义标签：
1. template
2. script
3. style
  来放置组件不同的内容块，但是因为浏览器不能够直接去识别该文件类型，所以我们需要通过webpack来进行编译打包，官方提供了一个对 .vue 文件进行处理的loader：vue-loader。

(4)注意:如果出现了如下的提示：
ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module ‘vue-template-compiler’
还需下载“vue-template-compiler”第三方模块并引入。

<code>
    <template>
        <h1>{{message}}</h1>
    </template>

    <script>
        export default {
            name: 'hello',
            data() {
                return {
                    message: 'Hello Miaov'
                }
            }
        }
    </script>
    <style></style>
</code>

2.vue-cli

vue实际开发使用 .vue 的但组件系统来实现，但是不能适应实际复杂的需求，我们还需要配置很多的一些东西来和 .vue 进行融合，这个配置很繁琐，所以官方提供了一个工具，帮助我们来构建一个项目开发过程中必须使用的一些内容，这个工具：vue-cli，通过这个工具我们就可以很方便的来创建一个基于vue的项目，我们也把这个工具称为脚手架。
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

安装

前提：先安装npm或yarn。
npm install vue-cli -g或yarn global add vue-cli命令。

vue-cli的构建

当我们通过上述方式安装好vue的脚手架以后，我们就可以在命令行中使用一个命令：vue（该命令是没有-cli的）

1.vue-cli创建步骤：
- (1)vue init
  - init：初始化（创建）基于vue的项目
  - ：构建模板的名称：常用的是 webpack，其他的可以参考：https://github.com/vuejs-templates
  - ：要构建的项目的名称
    如：vue init webpack hello：基于webpack来构建一个名称为hello的vue项目（项目构建一定要联网！联网！联网！）
- vue-cli是一个交互式命令行，通过vue命令构建项目会需要我们填写一些项目的信息：
  - (2)Project Name：要创建的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个ProjectName，默认为当前创建的项目目录名称，也可以自行制定（但是需要符合package.json中name命名规则，不要出现大写字母，空格，下划线，可以使用 - ）
  - (3)Project Description：项目简介，也会出现在package.json文件中,可选
  - (4)Author：作者，可选
  - (5)下一步直接回车
  - (6)nstall vue-router：是否安装vue路由组件，做项目的话一定要安装;
  - (7)Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测。语法检测工具，一般正规的项目团队中需要安装，个人项目看自己的使用情况决定
  - (8)Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）
  - (9)Setup e2e tests with Nightwatch?：是否安装端到端的测试
    完成上面步骤，over！
- 下载依赖包：”npm install”
  通过vue-cli完成配置以后，下一步需要安装vue所需要的依赖包，在该创建好的项目目录中，运行”npm install”命令。
  项目需要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明：
  - dependencies：项目中实际需要使用到的依赖包
  - devDependencies：项目开发过程中需要使用的一些工具包，不是项目实际线上代码的一部分。
2.运行
所需要的安装依赖包安装完成以后，就可以启动项目，运行
- yarn run dev / npm run dev：开启一个测试开发环境。会开启一个本地服务器，我们就可以通过该服务器环境去访问当前这个项目。
- yarn run build/npm run build：
  构建项目，把项目进行编译、打包，生成的文件默认存放在dist目录下。我们可以把项目打包后的文件上传到服务器，就是我们在线上运行需要的代码。
- 界面：如果是首次运行，那么会看到一个欢迎页面，下面我们就可以进行项目开发。
3.生成的项目的目录结构
- (1) build目录：构建项目命令所需要使用到的工具相关的脚本文件和配置文件
- (2) config目录：在vue-cli中会自动安装一个小型的express搭建的热重载web服务器，config里面就是关于这个服务器的相关配置
- (3) dist目录：项目编译构建上线后的存放目录
- (4) node_modules目录：项目依赖包存放目录
- (5) src 目录：项目源代码存放目录
  main.js：vue脚手架为我们自动生成的项目中设置的入口文件，在该入口文件中，做了一些项目初始化的工作
  - 引入 Vue
  - 引入必要的组件
  - 创建Vue实例
```
<code>
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

    // 导入 Vue 框架
    import Vue from 'vue'

    // 导入 App 组件对象
    import App from './App';

    import router from './router/index';

    // 设置项目开发提示
    Vue.config.productionTip = false;

    // 创建Vue实例对象
    new Vue({
        el: '#app',
        // router: router,
        router,
        template: '<App/>',
        components: { App }
    })
</code>
```
- (6) static目录：配置静态资源（内置的web服务器对应）存放目录
  在项目开发过程中，我们的大部分任务是在src这个目录下完成的。

2.路由

需求

当我们的应用变得复杂了以后，涉及到的页面也会变多，逻辑也会变复杂，原来我们是通过多页面的方式来组织和维护我们的网站，但是这样的用户体验不是太好（因为会刷新或跳转页面），为了解决用户体验问题，最好的方式，数据（页面会发生变化），但是不需要跳转、刷新。

通过ajax异步无刷新获取数据
获取到数据以后通过vue来处理和管理还有渲染页面。

什么情况下获取数据渲染页面？

传统的处理方式：通过url重新发送请求得到新的数据和页面，获取什么页面数据由url来决定，使用了单页面开发模式的话，就不能再使用页面跳转，但是可以使用url中的hash值的变化来决定获取什么内容渲染什么页面。
所以一个url的hash对应一个视图，那么我们就需要设置hash和视图的关系，我们可以把hash和view做一个对应关系（映射）
- 设置hash-view的map（映射）关系
- 监听hash变化
- 当hash值变化的时候，根据map找到对应的组件来渲染视图。
vue为我们提供了一个第三方的框架来实现上述的功能:vue-router
上面我们提到的地址-视图的映射：路由

vue-router

1.安装：
npm install vue-router / yarn add vue-router.
若在构建vue-cli的时候，在询问“nstall vue-router”（是否安装vue-router）时，选择“Y”,这里就不用重复安装vue-router。

2.配置路由步骤：

(1) 配置： “router/index.js”

导入 vue-router
把vue-router作为插件调用：Vue.use();

Vue.use( plugin )
参数：{Object | Function}
用法：
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

也就是说，“plugin”必须提供一个install方法以供vue自动调用。

new Router()得到一个路由对象，并把该对象添加到Vue实例的router属性中

new Router()需要传入一个配置对象，该对象中包含一个routes的属性，这个属性就保存了路由组件的映射关系

<code>
    import Vue from 'vue';
    import VueRouter from 'vue-router';

    import Register from '@/components/Register';
    import Login from '@/components/Login';

    // 注册vue-router组件到Vue实例中，才能在组件中使用 <router-view /> 组件</br>
    Vue.use(VueRouter);

    // 创建一个vuerouter实例对象，用来处理路由和组件的映射，该构造函数接受一个对象，其中routes
    export default new VueRouter({
        routes: [
            {
                //路由路径
                path: '/register',
                //路由名称(非必须)
                name:"reg",
                //路由组件
                component: Register
            },
            {
                path: '/login',
                name:"login",
                component: Login
            }
        ]
    });
</code>

(2) “main.js”

import router from ‘./router/index’;

在vue实例中添加“router: router”属性。

<code>
    import Vue from 'vue';
    import App from './App';
    import router from './router/index';
    new Vue({
        el: '#app',
        //router: router,
        router,
        template: '<App/>',
        components: { App }
    })
</code>

(3) “App.vue”
渲染和当前url中匹配的路由组件：“”。
vue-router会把和当前匹配路由组件拿取出来，替换这里的router-view。

<code>
    <template>
        <div id="app">
            <List :data="searchUsers" />
            // router-view：用来放置和当前url地址匹配的组件内容
            <router-view></router-view>
        </div>
    </template>
    <script></script>

    <!--scoped:设置该属性，那么style中的样式只对当前组件中的元素产生影响-->
    <style scoped>
        ul li {
            color: red;
        }
    </style>
</code>

注意：
- (a).vue2.5版本支持大写的HTML标签，如上文代码“”;
  　vue2.0还是烤串写法；
- (b).“App.vue”文件导入时，可以不写扩展名，是因为在“bulid/webpack.base.conf.js”文件中，已帮我们解析好;
- (c).在 “router/index.js”中，“import Login from ‘@/components/Login’;”，
  “@”指的是src目录，也是在在“bulid/webpack.base.conf.js”文件已帮我们定义好。
```
<code>
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
</code>
```
(d).在上述代码中，”<style scoped></style>“,

单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。
这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件
内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

这里的数字是随机生成的。

tongwandouQX

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-cli及vue-router(一)

1.单文件组件(1)问题：使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，这种做法的缺点很多：全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复字符串模板 (Stri
复制链接

扫一扫

专栏目录