zoukankan      html  css  js  c++  java

  • vue项目笔记

    参考了很多网上其他人的

    1.安装

    1. npm与cnpm：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；npm可以在node官网下载，安装；cnpm使用的是淘宝网的镜像，安装命令提示符执行：npm install cnpm -g --registry=https://registry.npm.taobao.org
    2. vue-cli全局安装：npm install vue-cli -g
    3. cd进入项目文件夹，初始化项目：vue init webpack
    4. 安装依赖包：cnpm install 
    5. 运行：npm run dev 
      //注意：如果是运行从其他地方down过来的项目，需要进入到该项目文件夹
//直接进行第四步， 安装项目所需依赖，也就是node_modules里的依赖文件，然后运行npm run dev
      //每次安装vue的模块插件的时候，cmd先把vue服务关掉ctrl+c，然后进行相应的安装
//安装 vue 路由模块 vue-router
npm install vue-router
//安装 vuex
npm install --save vuex 
      //打开config目录中的index文件，将port：8080改为port：1993
      //（修改项目端口，以免与其它文件冲突）。

    2.项目目录　

    ├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js                  // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js                 // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json               // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                     // APP入口文件
│   ├── assets                      // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components                  // 组件目录
│   │   └── Hello.vue               // 测试组件，回头删除
│   ├── main.js                     // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js                // 路由配置文件
└── static                          // 资源放置目录

    　　

     

    3.关于vuex　

    1. 如果把一个个vue组件当成一个个独立闭包函数，那vuex就相当于一个全局的json，里面有几个key： 
       State：用来存放变量，
   Mutations：用来存放函数（同步），
   Getters：State的计算属性，也是存放函数，但是当state属性改变时，Getters的返回值也会随之改变，
   Action：函数（异步）

      在任意一个组件中都可以调用vuex

    2. 在src中新建文件夹store，在store文件夹中新建文件index.js并输入几行代码 
      import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'
import mutations from './mutations'
import actions from './actions'


Vue.use(Vuex)

const state = {
    nowcity:{"name":"","id":""},
    selected:"miste"
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
      View Code
    3. //vuex一个属性一个文件，再把所有属性汇聚的index里，挂到Store下输出
//新建getters.js,actions.js,mutations.js文件,代码全都一样
export default {}

      最后在main.js里注册输出

    

    4.添加项目组件
    

      

    1. 添加文件：在src目录下新建components目录，添加first-component.vue文件，template 写 html，script写 js，style写样式

      

      

      <template>
　　<div id="firstcomponent">
　　　　<h1>标题</h1>
　　　　<a> 作者：{{ author }} </a>
　　</div>
</template>
 
<script type="text/javascript">
　　export default {
　　　　data () {
　　　　　　return {
　　　　　　　　author: "ling"
　　　　　　}
　　　　}
　　}
</script>
 
<style>
</style>
      

      
View Code
      


      2. 

    2. 引入：打开App.vue，引入刚刚新建的first-component组件，并删除vue-cli脚手架生成的一些无意义html。在<script></script>标签内的第一行写

      

      import firstcomponent from './components/first-component.vue

      

      

      　
      

      3. 

    3. 

      注册：在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号
      

      

      

      export default {
　　name: 'app',
　　data () {
　　　　return {
　　　　　　msg: 'Welcome to Your Vue.js App'
　　　　}
　　},
　　components: { firstcomponent }
}
      

      
View Code
      


      4. 

    4. 使用：在<template></template>内加上<firstcomponent></firstcomponent>

      

      

      <template>
　　<div id="app">
　　　　<img src="./assets/logo.png">
　　　　<h2>{{msg}}</h2>
　　　　<firstcomponent></firstcomponent>
　　</div>
</template>
      

      
View Code
      


      5. 

    

    5.添加vue-router路由
    

      

    1. 安装vue-router：

      

      cnpm install vue-router --save

//注意参数--save
//--save 可以理解成生产环境，会把依赖包名称添加到 package.json 文件 //dependencies 键下，dependencies是运行时依赖。
//--save-dev 则是开发环境， 添加到 package.json 文件 //devDependencies 键下，devDependencies是开发时的依赖，如生产时//不需要用到压缩库应该安装到devDependencies 。
      

      


      2. 

    2. 添加文件：在src目录下新建views目录，在目录下面新建两个文件，view1.vue和view2.vue。

      

      

      <template>
    <div >
        <h1>我是View1</h1>
        <a> 我是View1 </a>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        name: 'view1',
    }
</script>
 
<style>
</style>
      

      
View Code
      

      

      

      <template>
    <div >
        <h1>我是View2</h1>
        <a> 我是View2</a>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        name: 'view2',
    }
</script>
 
<style>
</style>
      

      
View Code
      


      3. 

    3. 添加并注册vue-router：添加路由router.js文件，这里添加了两个路由，分别指向view1和view2。

      

      

      import Vue from 'vue'
import Router from 'vue-router'
import View1 from './views/view1.vue'
import View2 from './views/view2.vue'

Vue.use(Router)
 
export default new Router({
    linkActiveClass: 'active',
    // 路由配置
    routes: [
    {
        path: '/view1',
        component: View1
    }, {
        path: '/view2',
        component: View2
    }, {
        path: '/*',
        component: View1
    }
    ]
})
      

      
View Code
      

       输出一个数组，数组里有一个对象（因为所有的页面都挂在App.vue里所以只有一个对象，这是我目前的理解）。path表示路径，component表示显示的页面（要显示哪个xxx.vue文件），children表示的嵌套的路由。路由先写这么多，但是输出路由了谁来执行呢？打开main.js文件
      

      4. 

    4. 使用router：修改main.js，引入 router并指定当前vue实例

      

      import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

      

      

      　　
      

      5. 

    5. 添加路由链接和出口：修改App.vue，添加链接和出口。

      

      <router-link to="/view1">Go to view1</router-link>
<router-link to="/view2">Go to view2</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

      

      

      　　
      

      6. 

    

    6.框架插件引入
    

    以mint-ui为例
    

      

    1. 下载：

      

      cnpm install mint-ui -S

      

      

      　　
      

      2. 

    2. 引入：打开main.js引入

      

      import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)　　
      

      

      3. 

    3. 使用：然后就可以直接在各个vue文件里使用mint-ui，注意一下

      

      

      //1.安装其他插件的时候，可以直接在 main.js 中引入并使用 Vue.use()来注册，
//2.但是 axios并不是vue插件，所以不能 使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。

//3.为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。
//4.在main.js中，
import axios from 'axios'
Vue.prototype.$http = axios
//直接在组件的 methods 中使用 $http命令
methods: {
  postData () {
    this.$http({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}
      

      
View Code
      


      4. 

    

    7.全局css样式
    

    类似于插件引入时候的方式
    

      

    1. 在src文件夹下新建文件夹style，在style内新建文件mycss.css，里边的样式即为全局样式
      2. 

    2. 在main.js引入：

      

      import './style/mycss.css'

      

      

      　
      

      3. 

    3. 

      使用：然后就可以直接在各个vue文件里使用mycss里的全局样式
      

      4. 

    4. 如果谷歌手机模式浏览字变小在index.html的head加入以下代码

      

      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />

      

      

      　　
      

      5. 

    

    8.相关属性
    

    

    export default {
  data () {
    return {
     //return中用来写需要用到的变量。
    }
  },
  component:{
  //注册组件,用来注册本组件需要引用的其他外部组件

  },
  mounted:function(){
  //生命周期,vue从创建到使用到结束分为了十个周期，称为生命周期钩子，而mounted是把vue数据加载的html的时候调用
     
  },
  computed:{
  //计算属性:是计算属性，其中写一个个函数，这些函数用来计算属性，当属性改变时，函数的结果的也会随之改变，而我们使用时只需要调用一次函数即可

  },
  methods:{
  //函数:用来写函数，调用一次执行一次

  }
}
    

    

    9.其他
    

      

    1. v-bind是用数据来驱动DOM，是单向绑定，但是V-model是双向绑定，及数据改变时DOM改变，但是DOM改变时数据也会改变。
      2. 

    2. 函数都写在methods中，计算函数写在computed中
      3. 

    3. 事件：


      4. 

    4. 自定义组件例如在mintUI中使用，绑定原生事件必须加@click.native="",但是对于button的原生事件不需要加
      5. 

    5. vue的页面跳转：

      

       methods:{
  //函数
    gologin:function(){
        this.$router.push('login');
    }
  }

      

      

      　　
      

      6. 

    


















    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  CentOS7下安装Scrapy
                    
    阿里云ECS提示RHSA-2017:3263: curl security update
                    
    CentOS 7.0安装配置LAMP服务器(Apache+PHP+MariaDB)
                    
    Electron: 从零开始写一个记事本app
                    
    flask请求流程
                    
    编写Dockerfile
                    
    docker-compose使用
                    
    redis持久化切换rdb到aof
                    
    RESTful   API规范
                    
    介绍importlib
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/su20110702048/p/8482954.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看