vue基础

最新推荐文章于 2020-11-04 08:08:26 发布

原创最新推荐文章于 2020-11-04 08:08:26 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

42 篇文章

订阅专栏

课程大纲：

vue配合node平台使用。
vue项目目录结构介绍。
vueRouter

复习：如何使用vue-cli创建项目

全局只安装一次脚手架：npm install -g @vue/cli

注意：如果以前安装过旧版本的vue脚手架，需要先把旧版本的卸载干净，再重新使用上面的命令安装新版本。安装过程中，由于网络等原因造成安装失败，请使用npm uninstall -g @vue/cli卸载后，再安装，直到安装成功为至。

安装完成后，使用：vue --version或vue -V查看是否安装成功。

注：如果能得到版本号表示安装成功。

使用命令：vue create project-name 创建项目。vue create vue-demo

注：和express框架不一样的是：此命令在创建项目的过程中会帮你自动安装第三方依赖包。如果中间出现错误，请回到项目目录中，把node_modules文件夹删除，自行通过npm install安装。另外注意：项目名称尽量不要和现有的npm市场上的名称重复，尽量使用中线命名，如：vue-demo,zhiyou-office

运行项目：npm run serve
不断的开发并重构项目，直到项目完成。
发布，通过命令：npm run build生成项目编译后的目录dist。把dist部署到服务器上即可！

==========================================

“serve”: “vue-cli-service serve --open”

public
npm run build 打包编译不会处理public文件
assert 会打包

一级目录

build: webpack 配置相关的目录 node_modules: npm install 安装的依赖代码库 src: 存放源码，我们开发的所有代码都放在src目录下。 staic: 存放第三方静态资源的目录

一级文件：

.gitignore: 配置Git仓库忽略的一些文件(不会上传) index.html: 入口html 文件。 package.json: 项目的一些配置信息(项目的一些具体信息)

src 文件夹下的目录： assets 文件夹：存放静态资源，例如：图片，font字体等。 conponents 文件夹：存放组件，里面你可以在建文件来分组件，比如建 header 文件夹， footer 文件夹 router 文件夹：配置路由文件 App.vue 文件： App.vue是我们的主组件，所有页面都是在App.vue下进行切换的 main.js 文件：主要作用是初始化vue实例并使用需要的插件

大概顺序：
index.html-main.js-app.vue-页面组件-局部组件

=================================

浏览器端使用直接参考课件即可！
node端步骤总结：
2.1. 创建路由模块，并导出。

2.1.1. 引入Vue和Vue-Router模块包，此两个模块是在Vue中使用路由的核心包。依赖关系：路由功能->Vue-Router->Vue。并把路由对象加入Vue管线中。
2.1.2. 引入需要配置路由的页面级组件。方便配置路由时使用。
2.1.3. 创建路由实例，并配置路由实例（重要步骤）
2.1.4. 导出路由实例。

2.2. 在main.js导入路由模块，并挂载到应用程序根实例的router属性上。

new Vue({
  router: router
})

router在浏览器的使用

  <div id="app">
        <nav>
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/gn">国内新闻</router-link>
                <router-link to="/gj">国际新闻</router-link>               
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </nav>
    </div>
    <script>
    var app = new Vue({
        el: "#app",
        // 把应用程序和路由挂载
        router:new VueRouter({//路由选项
            routes :[
                // 路由的路径和对应的组件
                { path: '/gn', component: { template: '<div>国内 新闻</div>' } },
                { path: '/gj', component: { template: '<div>国际 新闻</div>' } },
            ]// (缩写) 相当于 routes: routes
      })
    })
    </script>

=========================
router在项目的使用
实现：获取动态路由的参数/dtly/10/1

 router.js里面
        1.先{
          path:'/dtly/:userid/:id',
          name:'dtly',
          component:DemoDTLY 
        },
        2.import DemoDTLY from './views/DemoDTLY.vue'
        3.创建views/DemoDTLY.vue写框架
             <template >
                <div >
                    <h1>演示动态路由</h1>     
                </div>
              </template>
              <script>
              export default {
                  name:'DemoDTLY',
              }
              <script>
          
        4.App.vue
          <router-link to="/dtly/10/1">动态路由</router-link> |
          <router-link to="/dtly/11/2">动态路由</router-link> |
        5.views/DemoDTLY.vue
           {{$route.params}}
           <button @click="save">获取动态参数</button>
           save(){
                console.log(this.$route.params.userid);
                console.log(this.$route.params.id);
            }

6.？后面如何获取

 1.App.vue
  <router-link to="/dtly/12/3?name=dsh&age=20#top">动态路由</router-link>
  2.DemoDTLY.vue
  {{$route.params}}-{{$route.query}}-{{$route.hash}}
  3.watch (监测变化)
  watch:{
        // '$route'(to,from){},
        '$route':function(to,from){
             console.log(to);
             console.log(from);   
        }
    },
7.监听路由变化
8.二级路由
  router.js
    children:[//children二级路由
      {path:'a',name:'homea',component:ComA},
      {path:'b',name:'homeb',component:ComB},
    ]
    import ComA from './views/ComA.vue'
    import ComB from './views/ComB.vue'
  views/ComA.vue
  views/ComB.vue
  home.vue
    <router-link to="/a">A页面</router-link>
    <router-link to="/b">B页面</router-link>
    <router-view></router-view>